Gulp入门 - devnote

常见的插件基本使用

• 压缩js文件 gulp-uglify 使用方法 .pipe(uglify())

• 压缩css文件 gulp-minify-css 使用方法 .pipe(minifyCSS())

• 添加CSS浏览器前缀 gulp-autoprefixer 使用方法 .pipe(autoprefixer({browsers: 'last 2 versions'}))

• 压缩图片 gulp-imagemin 使用方法 .pipe(imagemin({progressive:true}))

• 合并文件 gulp-concat 使用方法 .pipe(concat('index.js'))

• 重命名文件 gulp-rename 使用方法 .pipe(rename('index.min.js'))

• 压缩html文件 gulp-html-minify 使用方法 .pipe(htmlminify())

提升效率

• gulp.watch监听文件的变化情况，但是gulp.watch不能够自动启动，需要使用另外的任务启动,代码如下：

      gulp.task('auto', function () { // 在命令行使用 gulp auto 启动此任务        gulp.watch('js/*.js', ['script']) // 监听文件修改，当文件被修改则执行 script 任务    })

• 让命令输出带有颜色的文字 gulp-util

• gulp-watch-path和stream-combiner2同时使用 基本原理：使用gulp-watch-path处理gulp.watch返回的事件，得到变化的路径，stream-combiner2对变化的文件进行处理，见代码：

    var handleError = function(err){        var colors = gutil.colors;        console.log('\n');        gutil.log(colors.red('Error!'));        gutil.log('fileName:'+colors.red(err.fileName));        gutil.log('lineNumber:'+colors.red(err.lineNumber));        gutil.log('messsage:'+err.message);        gutil.log('plugin:'+colors.yellow(err.plugin));    }    //使用watchjs能够控制单个文件的变化    gulp.task('watchjs',function(){        gulp.watch('public/back/**/*',function(event){var paths = watchPath(event,'public/back/','dist/back/');gutil.log(gutil.colors.green(event.type)+" "+paths.srcPath);//打印变化的类型及文件的路径名称gutil.log('Dist '+paths.distPath);//打印目标路径//将操作放在combined中监视var combined = combiner.obj([    gulp.src(paths.srcPath),uglify(),gulp.dest(paths.distDir)]);    combined.on('error',handleError);        })    })