gulp——基于流的自动化构建工具

目录

1. gulp简介
2. gulp API
3. gulp常用任务
4. gulp的使用

4.1 gulp安装

4.2 创建gulpfile.js

4.3 运行gulp

1. 延伸阅读

gulp简介

gulp.js是一个前端自动化构建工具，前端开发者可以使用它在项目开发过程中自动执行常见任务。

gulp.js是基于流（stream）操作的，直接将上一步的输出通过管道（pipe）输入到下一步，可以快速构建项目并减少频繁的IO操作。

参考：

英文官网：http://gulpjs.com/

中文官网：http://www.gulpjs.com.cn/

gulp API

gulp提供4个API

1. gulp.src(globs[, options])
2. gulp.dest(path[, options])
3. gulp.task(name [, deps] [, fn])
4. gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

参考：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp常用任务

1. 编译Sass\Less
2. 压缩CSS
3. 压缩JS
4. Uglify
5. JSHint
6. 合并雪碧图
7. 合并文件
8. Autoprefixer
9. LiveReload
10. 编译jsx
11. 清理目标文件夹文件
12. ......

参考：

可在npm官网搜索各种gulp插件：https://www.npmjs.com/

按类型罗列了常用的gulp插件：https://github.com/vigetlabs/gulp-starter

gulp的使用（以编译sass文件为例）

gulp安装

全局安装

npm install -g gulp #全局安装

局部安装

npm install gulp --save-dev # 局部安装

安装gulp插件

npm install gulp-sass  --save-dev

创建gulpfile.js

引入gulp及插件

var gulp    = require(‘gulp‘),                //基础库
    sass = require(‘gulp-sass‘);              //sass

创建任务

gulp.task(‘css‘, function () {
    var cssSrc = ‘./src/scss/*.scss‘,
        cssDst = ‘./dist/css‘;

    gulp.src(cssSrc)
        .pipe(sass({ style: ‘expanded‘}))
        .pipe(gulp.dest(cssDst))
        .pipe(minifycss())
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));
});

监听任务

gulp.task(‘watch‘,function(){

    server.listen(port, function(err){
        if (err) {
            return console.log(err);
        }

        // 监听css
        gulp.watch(‘./src/scss/*.scss‘, [‘css‘]);

    });
});

执行任务

gulp.task(‘default‘, [‘css‘]);

运行gulp

启动命令行工具，切换目录至gulpfile所在文件夹，输入gulp运行任务。

参考：http://www.dbpoo.com/getting-started-with-gulp/

延伸阅读

1. grunt、gulp、webpack对比： https://npmcompare.com/compare/browserify,grunt,gulp,webpack
2. 如何在Gulp中提高Browserify的打包速度https://segmentfault.com/a/1190000004932832
3. gulp配置browserify多入口文件： http://fettblog.eu/gulp-browserify-multiple-bundles/
4. gulp+browerify： https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623#.ydz238y6u
5. gulp+browerify：https://www.viget.com/articles/gulp-browserify-starter-faq