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

目录

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

          4.1 gulp安装

          4.2 创建gulpfile.js

          4.3 运行gulp

5. 延伸阅读

 

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