[轉]gulp構建前端工程

摘要: Gulp 是一個自動化工具，前端開發者能夠使用它來處理常見任務： 搭建web服務器 文件保存時自動重載瀏覽器 使用預處理器如Sass、LESS 優化資源，好比壓縮CSS、JavaScript、壓縮圖片 固然Gulp能作的遠不止這些。若是你夠瘋狂，你甚至能夠使用它搭建一個靜態頁面生成器。Gulp真的足夠強大，但你必須學會駕馭它。 這是這篇文章的主要目的。幫助你瞭解Gulp的基礎用法，助你早日完成一統天下的大業。 在咱們深刻了解以前，咱們先來講說爲何是Gulp。 爲何是Gulp? 相似Gulp的工具，咱們一般稱之爲構建工具。現在最流行的兩個構建工具是Gulp和Grunt。 已...

什麼是gulp？

gulp是新一代的前端項目構建工具，你能夠使用gulp及其插件對你的項目代碼（less,sass）進行編譯，還能夠壓縮你的js和css代碼，甚至壓縮你的圖片，gulp僅有少許的API，因此很是容易學習。 gulp 使用 stream 方式處理內容。Node催生了一批自動化工具，像Bower，Yeoman，Grunt等。

gulp和grunt的異同點

易於使用：採用代碼優於配置策略，Gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。 高效：經過利用Node.js強大的流，不須要往磁盤寫中間文件，能夠更快地完成構建。 高質量：Gulp嚴格的插件指導方針，確保插件簡單而且按你指望的方式工做。 易於學習：經過把API降到最少，你能在很短的時間內學會Gulp。構建工做就像你設想的同樣：是一系列流管道。 

由於gulp是用node.js寫的，因此你須要在你的終端上安裝好npm。npm是node.js的包管理器，因此先在你的機子上安裝好node.js吧

gulp安裝命令

sudo npm install -g gulp 

在根目錄下新建package.json文件

npm init .

安裝gulp包

npm install gulp --save-dev 

安裝好後再次輸入gulp -v查看版本號，以下圖顯示則爲成功：

安裝插件

安裝經常使用插件：

sass的編譯                  （gulp-ruby-sass）
自動添加css前綴              （gulp-autoprefixer）
壓縮css                    （gulp-minify-css）
js代碼校驗                  （gulp-jshint）
合併js文件                  （gulp-concat） 壓縮js代碼 （gulp-uglify） 壓縮圖片 （gulp-imagemin） 自動刷新頁面 （gulp-livereload） 圖片緩存，只有圖片替換了才壓縮 （gulp-cache） 更改提醒 （gulp-notify） 清除文件 （del）

安裝這些插件須要運行以下命令：

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev 

-save和-save-dev能夠省掉你手動修改package.json文件的步驟。

npm install module-name -save 自動把模塊和版本號添加到dependencies部分 npm install module-name -save-dev 自動把模塊和版本號添加到devdependencies部分 

gulp命令

你僅僅須要知道的5個gulp命令

gulp.task(name[, deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數 gulp.run(tasks...)：儘量多的並行運行多個task gulp.watch(glob, fn)：當glob內容發生改變時，執行fn gulp.src(glob)：置須要處理的文件的路徑，能夠是多個文件以數組的形式，也能夠是正則 gulp.dest(path[, options])：設置生成文件的路徑 

glob：能夠是一個直接的文件路徑。他的含義是模式匹配。
gulp將要處理的文件經過管道（pipe()）API導向相關插件。經過插件執行文件的處理任務。

gulp.task('default', function () {...}); 

gulp.task這個API用來建立任務，在命令行下能夠輸入$ gulp [default]，（中括號表示可選）來執行上面的任務。

gulp官方API文檔：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 插件大全：http://gulpjs.com/plugins/

開始構建項目

在項目根目錄下新建一個gulpfile.js文件，粘貼以下代碼：

//在項目根目錄引入gulp和uglify插件 var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('compress',function(){ return gulp.src('script/*.js') .pipe(uglify()) .pipe(gulp.dest('dist')); }); 

注：gulpfile.js文件名不可更改。
項目須要用到uglify和rename插件，執行如下命令安裝：

npm install --save-dev gulp-uglify npm install --save-dev gulp-rename

以個人爲例，進入gulpfile.js所在目錄：

cd /Users/trigkit4/gulp-test

而後輸入：

var gulp = require('gulp'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); gulp.task('compress',function(){ return gulp.src('script/*.js') .pipe(uglify()) .pipe(rename('jquery.ui.min.js')) .pipe(gulp.dest('dist')); });

該命令會安裝package.json下的所有依賴，以下圖所示：

完整的gulpfile.js

// 載入外掛 var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), clean = require('gulp-clean'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'); // 樣式 gulp.task('styles', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'expanded', })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/styles')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('dist/styles')) .pipe(notify({ message: 'Styles task complete' })); }); // 腳本 gulp.task('scripts', function() { return gulp.src('src/scripts/**/*.js') .pipe(jshint('.jshintrc')) .pipe(jshint.reporter('default')) .pipe(concat('main.js')) .pipe(gulp.dest('dist/scripts')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(notify({ message: 'Scripts task complete' })); }); // 圖片 gulp.task('images', function() { return gulp.src('src/images/**/*') .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) .pipe(gulp.dest('dist/images')) .pipe(notify({ message: 'Images task complete' })); }); // 清理 gulp.task('clean', function() { return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe(clean()); }); // 預設任務 gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); }); // 看守 gulp.task('watch', function() { // 看守全部.scss檔 gulp.watch('src/styles/**/*.scss', ['styles']); // 看守全部.js檔 gulp.watch('src/scripts/**/*.js', ['scripts']); // 看守全部圖片檔 gulp.watch('src/images/**/*', ['images']); // 創建即時重整伺服器 var server = livereload(); // 看守全部位在 dist/ 目錄下的檔案，一旦有更動，便進行重整 gulp.watch(['dist/**']).on('change', function(file) { server.changed(file.path); }); }); 

注：pipe()是stream模塊裏傳遞數據流的一個方法，第一個參數爲插件方法，插件會接收從上游流下的文件，進行處理加工後，再往下流。

gulp.task('任務名稱', function () { return gulp.src('文件路徑') .pipe(...) .pipe(...) // 直到任務的最後一步 .pipe(...); }); 

若是想使用gulp直接啓動服務器

添加gulp-connect

npm install gulp-connect --save-dev 添加task gulp.task('webserver', function() { connect.server({ livereload: true, port: 8888 }); });

gulp插件

• gulp-gh-pages：使用gulp來把markdown生成html文檔並上傳到git pages上

https://github.com/shinnn/gulp-gh-pages

var gulp = require('gulp'); var ghPages = require('gulp-gh-pages'); gulp.task('deploy', function() { return gulp.src('./dist/**/*') .pipe(ghPages()); }); 

• gulp-jade插件：將jade編譯成html文件

• gulp-less插件：將less編譯成css文件

var less = require('gulp-less'); var path = require('path'); gulp.task('less', function () { return gulp.src('./less/**/*.less') .pipe(less({ paths: [ path.join(__dirname, 'less', 'includes') ] })) .pipe(gulp.dest('./public/css')); }); 

• gulp-live-server 插件：方便的，輕量級的服務器

var gulp = require('gulp'); var gls = require('gulp-live-server'); gulp.task('serve', function() { //1. serve with default settings var server = gls.static(); //equals to gls.static('public', 3000); server.start(); //2. serve at custom port var server = gls.static('dist', 8888); server.start(); //3. serve multi folders var server = gls.static(['dist', '.tmp']); server.start(); //use gulp.watch to trigger server actions(notify, start or stop) gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) { server.notify.apply(server, [file]); }); }); 

• gulp-livereload，能夠實時保存刷新，那樣就不用按F5和切換界面了

• gulp-load-plugins：在你的package.json文件中自動加載任意的gulp插件

$ npm install --save-dev gulp-load-plugins 

例如一個給定的package.json文件以下：

{

    "dependencies": { "gulp-jshint": "*", "gulp-concat": "*" } } 

在gulpfile.js中添加以下代碼：

var gulp = require('gulp'); var gulpLoadPlugins = require('gulp-load-plugins'); var plugins = gulpLoadPlugins(); 

plugins.jshint = require('gulp-jshint');

plugins.concat = require('gulp-concat');

• gulp-babel：gulp 的babel插件，

$ npm install --save-dev gulp-babel babel-preset-es2015

使用方法：

const gulp = require('gulp'); const babel = require('gulp-babel'); gulp.task('default', () => { return gulp.src('src/app.js') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('dist')); });

官方github： https://github.com/gulpjs/gulp