Gulp 自動化工具開發非常方便，便於上手，值得使用。
一、Gulp安裝
gulp是基於NodeJS運行的，所以需要想安裝NodeJS. http://nodejs.org/download/
安裝gulp
# 安裝全局環境
npm install gulp -g #安裝本地環境
npm install gulp --save-dev
二、Gulp插件安裝
npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev
插件可根據自己的需求安裝，分別代表：
1、編譯Sass,生成雪碧圖(gulp-compass);
2、編譯sass(gulp-sass);
3、sass瀏覽器地圖(gulp-sourcemaps);
4、重命名文件(gulp-rename);
5、JS語法檢測(gulp-jshint);
6、JS丑化(gulp-uglify);
7、JS文件合並(gulp-concat);
8、圖片壓縮(gulp-imagemin);
9、緩存通知(gulp-cache);
10、web服務(gulp-connect);
11、壓縮CSS(gulp-minify-css);
12、css文件引用URL圖片加版本號(gulp-make-css-url-version);
13、清空文件夾(gulp-clean);
14、更新通知(gulp-notify);
15、html文件引用加版本號(gulp-rev-append);
16、web服務瀏覽器同步瀏覽(browser-sync); // 推薦使用這個作為web服務
三、創建配置文件gulpfile.js
1、引入插件
var gulp = require('gulp'), compass = require('gulp-compass'), // compass編譯Sass, 生成雪碧圖
sass = require('gulp-sass'), // sass編譯
sourcemaps = require('gulp-sourcemaps'), // sass地圖
rename = require('gulp-rename'), // 重命名文件
jshint = require('gulp-jshint'), // JS語法檢測
uglify = require('gulp-uglify'), // JS丑化
concat = require('gulp-concat'), // JS拼接
imagemin = require('gulp-imagemin'), // 圖片壓縮
cache = require('gulp-cache'), // 緩存通知
connect = require('gulp-connect'), // web服務
minifycss = require('gulp-minify-css'), // 壓縮CSS
cssver = require('gulp-make-css-url-version'), // css文件引用URL加版本號
clean = require('gulp-clean'), // 清空文件夾
notify = require('gulp-notify'), // 更新通知
rev = require('gulp-rev-append'), // html添加版本號
browserSync = require('browser-sync'), // 瀏覽器同步
reload = browserSync.reload; // 自動刷新
2、配置開發路徑，結構為：
/*****項目結構***** * project(項目名稱) * |–node_modules 組件目錄 * |–dist 發布環境 * |–css 樣式文件(壓縮) * |–images 圖片文件(壓縮圖片) * |–js js文件(壓縮) * |–index.html 靜態文件(壓縮html) * |–dev 生產環境 * |–sass sass文件 * |–images 圖片文件 * |–js js文件 * |–index.html 靜態文件 * |–config.rb Compass配置文件 * |–package.json 項目信息 * |–gulpfile.js gulp任務文件 **/
gulpfile.js配置文件中的路徑為：
// 路徑變量
var path = { // 開發環境
dev: { html: './dev', js: './dev/js', sass: './dev/sass', css: './dev/css', image: './dev/images' }, // 發布環境
dist: { html: './dist', js: './dist/js', css: './dist/css', image: './dist/images' } };
3、構建gulp執行任務
// 定義web服務模塊，增加瀏覽器同步瀏覽
gulp.task('browser-sync', function() { browserSync({ server: { baseDir: '.' } }); }); // 創建Compass任務，編譯Sass生成雪碧圖
gulp.task('compass', function() { gulp.src(path.dev.sass+'/*.scss') .pipe(compass({ config_file: './config.rb', // 配置文件
css: path.dev.css, // 編譯路徑
sass: path.dev.sass // sass路徑
//image: path.dev.image // 圖片路徑，用於生成雪碧圖
})) .pipe(cssver()) // CSS文件引用URl加版本號
.pipe(minifycss()) // 壓縮CSS
.pipe(gulp.dest(path.dist.css)) // 發布到線上版本
.pipe(reload({stream: true})); }); // 壓縮HTML
gulp.task('html', function() { gulp.src(path.dev.html+"/*.html") .pipe(rev()) // html 引用文件添加版本號
.pipe(gulp.dest(path.dist.html)) .pipe(reload({stream: true})); }); //檢查腳本
gulp.task('lint', function() { gulp.src(path.dev.js+'/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });// 圖片壓縮
gulp.task('image', function() { gulp.src(path.dev.image+'/*.*') .pipe(cache(imagemin())) .pipe(reload({stream: true})) .pipe(gulp.dest(path.dist.image)); //.pipe(notify({ message: '圖片壓縮'}));
}); // 合並壓縮JS文件
gulp.task('script', function() { gulp.src(path.dev.js+'/*.js') //.pipe(concat('all.js')) // 合並
//.pipe(gulp.dest(path.dist.js))
//.pipe(rename('all.min.js')) // 重命名
.pipe(uglify()) // 壓縮
.pipe(gulp.dest(path.dist.js)) //.pipe(notify({ message: 'JS合並壓縮' }))
.pipe(reload({stream: true})); }); // 清空文件夾
gulp.task('clean', function() { gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false}) .pipe(clean()); }); // 默認任務
gulp.task("default", function() { gulp.run('browser-sync', 'lint', 'compass', 'script', 'image');
// 檢測文件發送變化 - 分開監聽為了執行對應的命令
gulp.watch(path.dev.html+'/*.*', ['html']); gulp.watch(path.dev.sass+'/*.scss', ['compass']); gulp.watch(path.dev.image+'/**', ['image']); gulp.watch(path.dev.js+'/*.js', ['lint', 'script']); });
注意：html文件引用增加版本號時，需要在html文件引用路徑中增加 ?rev=@@hash 方可在編譯時，自動添加版本號
<link rel="stylesheet" type="text/css" href="./css/main.css?rev=@@hash">
4、配置瀏覽器自動刷新問題
使用gulp的browser-sync插件可以實現瀏覽器自動刷新，同步瀏覽的功能，創建實現自動刷新，需要啟動自動刷新的插件，在引入插件處
var browserSync = require('browser-sync'), // 瀏覽器同步
reload = browserSync.reload; // 自動刷新
之后，創建browser-sync的task任務，並在gulp的啟用。
gulp.task('browser-sync', function() { browserSync({ server: { baseDir: '.' } }); });
baseDir 為默認的服務訪問路徑，默認訪問為 http://localhost:3000, 配置信息為 http://localhost:3001
然后在發生變化要刷新的任務處，添加如下語句即可。詳情參考: BrowserSync + Gulp.js
.pipe(reload({stream: true}));
gulpfile.js完整文件如下：
/** * *****組件安裝***** * npm install gulp browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev * * *****項目結構***** * project(項目名稱) * |–.svn 通過svn管理項目會生成這個文件夾 * |–node_modules 組件目錄 * |–dist 發布環境 * |–css 樣式文件(style.css style.min.css) * |–images 圖片文件(壓縮圖片) * |–js js文件(main.js main.min.js) * |–index.html 靜態文件(壓縮html) * |–dev 生產環境 * |–sass sass文件 * |–images 圖片文件 * |–js js文件 * |–index.html 靜態文件 * |–config.rb Compass配置文件
* |-package.json 項目信息 * |–gulpfile.js gulp任務文件 **/ // 引入 Gulp插件 var gulp = require('gulp'), compass = require('gulp-compass'), // compass編譯Sass, 生成雪碧圖 sass = require('gulp-sass'), // sass編譯 sourcemaps = require('gulp-sourcemaps'), // sass地圖 rename = require('gulp-rename'), // 重命名文件 jshint = require('gulp-jshint'), // JS語法檢測 uglify = require('gulp-uglify'), // JS丑化 concat = require('gulp-concat'), // JS拼接 imagemin = require('gulp-imagemin'), // 圖片壓縮 cache = require('gulp-cache'), // 緩存通知 connect = require('gulp-connect'), // web服務 minifycss = require('gulp-minify-css'), // 壓縮CSS cssver = require('gulp-make-css-url-version'), // css文件引用URL加版本號 clean = require('gulp-clean'), // 清空文件夾 notify = require('gulp-notify'), // 更新通知 rev = require('gulp-rev-append'), // html添加版本號 browserSync = require('browser-sync'), // 瀏覽器同步 reload = browserSync.reload; // 自動刷新 // 路徑變量 var path = { // 開發環境 dev: { html: './dev', js: './dev/js', sass: './dev/sass', css: './dev/css', image: './dev/images' }, // 發布環境 dist: { html: './dist', js: './dist/js', css: './dist/css', image: './dist/images' } }; // 定義web服務模塊 gulp.task('webserver', function() { connect.server({ livereload: true, port: 8888 }); }); // 定義web服務模塊，增加瀏覽器同步瀏覽 gulp.task('browser-sync', function() { browserSync({ server: { baseDir: '.' } }); }); // 創建Compass任務，編譯Sass生成雪碧圖 gulp.task('compass', function() { gulp.src(path.dev.sass+'/*.scss') .pipe(compass({ config_file: './config.rb', // 配置文件 css: path.dev.css, // 編譯路徑 sass: path.dev.sass // sass路徑 //image: path.dev.image // 圖片路徑，用於生成雪碧圖 })) .pipe(cssver()) // CSS文件引用URl加版本號 .pipe(minifycss()) // 壓縮CSS .pipe(gulp.dest(path.dist.css)) // 發布到線上版本 .pipe(reload({stream: true})); }); // 壓縮HTML gulp.task('html', function() { gulp.src(path.dev.html+"/*.html") .pipe(rev()) // html 引用文件添加版本號 .pipe(gulp.dest(path.dist.html)) .pipe(reload({stream: true})); }); //檢查腳本 gulp.task('lint', function() { gulp.src(path.dev.js+'/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 圖片壓縮 gulp.task('image', function() { gulp.src(path.dev.image+'/*.*') .pipe(cache(imagemin())) .pipe(reload({stream: true})) .pipe(gulp.dest(path.dist.image)); //.pipe(notify({ message: '圖片壓縮'})); }); // 合並壓縮JS文件 gulp.task('script', function() { gulp.src(path.dev.js+'/*.js') //.pipe(concat('all.js')) // 合並 //.pipe(gulp.dest(path.dist.js)) //.pipe(rename('all.min.js')) // 重命名 .pipe(uglify()) // 壓縮 .pipe(gulp.dest(path.dist.js)) //.pipe(notify({ message: 'JS合並壓縮' })) .pipe(reload({stream: true})); }); // 清空文件夾 gulp.task('clean', function() { gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false}) .pipe(clean()); }); // 默認任務 gulp.task("default", function() { gulp.run('browser-sync', 'lint', 'compass', 'script', 'image'); // 檢測文件發送變化 - 分開監聽為了執行對應的命令 gulp.watch(path.dev.html+'/*.*', ['html']); gulp.watch(path.dev.sass+'/*.scss', ['compass']); gulp.watch(path.dev.image+'/**', ['image']); gulp.watch(path.dev.js+'/*.js', ['lint', 'script']); });
gulp-compass 合並雪碧圖使用的 config.rb 配置文件，內容如下：
# Set this to the root of your project when deployed: http_path = "/" css_dir = "./dev/css" sass_dir = "./dev/sass" images_dir = "./dev/images" javascripts_dir = "./dev/js" # You can select your preferred output style here (can be overridden via the command line): # 合並雪碧圖的方式 # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # 相對路徑 relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
四、運行gulp
在項目目錄下執行 gulp 命令就會運行 default 任務，並且啟動監聽，之所以分開設置監聽任務，是為了執行對應命令，如果合並在一起執行，會增加編譯時間。
五、gulpfile.js配置文件參數說明
1、gulp.task()
gulp模塊的task方法，用於定義具體的任務，第一個參數為任務名，第二個參數為任務函數，如image任務，調用直接運行 gulp image
gulp.task('image', function() { console.log('圖片任務執行'); });
task方法也可以知道一組任務，如：
gulp.task('default',['html', 'sass', 'js']);
2、gulp.src()
gulp模塊的src方法，用於產生數據流，表示要處理的文件，一般有以下幾種格式：
- js/app.js：指定確切的文件名。
- js/*.js：某個目錄所有后綴名為js的文件。
- js/**/*.js：某個目錄及其所有子目錄中的所有后綴名為js的文件。
- !js/app.js：除了js/app.js以外的所有文件。
- *.+(js|css)：匹配項目根目錄下，所有后綴名為js或css的文件。
src方法的參數可以是一個數組，如：
gulp.src(['./js/*.js', './sass/*.scss']);
3、gulp.watch()
gulp模塊的watch方法，用於指點需要監視的文件，一旦文件發生變動，就運行指點任務。
gulp.watch('./js/*.js', ['lint', 'script']);
4、pipe
.pipe為每個任務的連接，執行完一個任務之后，再次連接執行下一個任務，如：
.pipe(minifycss()) // 壓縮CSS
.pipe(gulp.dest(path.dist.css)); // 發布到線上版本
先執行壓縮，再發布到線上版本
六、gulp學習資料參考
1、Gulp.js：比 Grunt 更簡單的自動化的項目構建利器
2、Gulp使用指南
8、https://www.npmjs.com/package/gulp