使用Gulp構建前端專案
一、什麼是Gulp?
Gulp是新一代前端專案構建工具，可以使用Gulp及其外掛對你的專案程式碼（less,sass）等進行編譯，還可以壓縮你的js和css程式碼，甚至是壓縮你的圖片，Gulp僅有少量的API，所以非常容易學習。Gulp使用stream方式處理內容。
Node催生了一批自動化工具，像Yeoman, Bower, Grunt等。
Gulp和Grunt的異同點：
易於使用：採用程式碼優於配置策略，Gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。
高效：通過利用Node.js強大的流，不需要往磁碟寫中間檔案，可以更快的完成構建。
高質量：Gulp嚴格的外掛指導方針，確保外掛簡單並且按你期望的方式工作。
易於學習：通過把API降到最少，你能在很短的時間內學會Gulp。構建工作就是一系列流管道。
使用Gulp首先需要在電腦上安裝 node 和 npm，npm 是node的包管理器。
二、Gulp的安裝
1、安裝Gulp
Gulp的安裝命令：
npm install -g gulp
在mac 或 Linux上：
sudo npm install -g gulp
在根目錄下新建 package.json檔案：
npm init .
安裝Gulp 包：
npm install gulp --save-dev
檢視版本號：
gulp -v
2、安裝外掛
常用的外掛有：
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 gul-concat gulp-jshint del --save-dev
--save和 --save-dev 可以省掉你手動修改package.json檔案的步驟：
npm install module-name --save 自動把模組和版本號新增到dependencies部分
npm install module-name --save-dev 自動把模組和版本號新增到devdependecies部分
3、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',funciton(){......}) :
gulp.task這個API用來建立任務，在命令列下可以輸入 $ gulp [default], （中括號表示可選）來執行上面的任務。
三、開始構建專案
在專案根目錄下新建一個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 gulp-uglify --save-dev
npm install gulp-rename --save-dev
進入專案所在檔案，然後輸入：
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'));
});四、完整的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外掛
1、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());
});3、gulp-less外掛： 將less編譯成css檔案
var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');
gulp.task('less',function(){
return gulp.src('./less/**/*.less')
.pipe(less({
path:[path.join(_dirname,'less','includes')]
}))
.pipe(gulp.dest('./public/css'));
});4、gulp-live-server外掛： 方便的，輕量級的伺服器
var gulp = require('gulp');
var gls = require('gulp-live-server');
gulp.task('serve',function(){
//1.serve with default settints
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 action(notify,start or stop)
gulp.watch(['static/**/*.css','static/**/*.html'],function(file){
server.notify.apply(server,[file]);
});
}); 5、gulp-livereload外掛： 可以實時儲存重新整理，那樣就不用按F5和切換介面了
6、gulp-load-plugins外掛: 在你的package.json檔案中自動載入任意的gulp外掛
npm install gulp-load-plugins --save-dev
例如package.json檔案如下：
{
“dependencies”:{
"gulp-jshint":"*",
"gulp-concat":"*"
}
}var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
plugins.jshint = require('gulp-jshint');
plugins.concat = require('gulp-concat');
7、gulp-babel外掛：
npm install gulp-babel babel-preset-es2015 --save-dev
使用方法：
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'));
});說明：Babel是一個JS轉換編譯器，它可以將ES6轉換為ES5。如上文的 const 和箭頭方法。
官方github：https://github.com/gulpjs/gulp