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的打包速度http://www.javashuo.com/article/p-egsdshmp-db.html
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