1.自動加載插件
安裝：npm install --save-dev gulp-load-plugins
gulp-load-plugins這個插件能自動幫你加載package.json文件里的gulp插件。
例如假設你的package.json文件里的依賴是這樣的:
{
"devDependencies": {
"gulp": "~3.6.0",
"gulp-rename": "~1.2.0",
"gulp-ruby-sass": "~0.4.3",
"gulp-load-plugins": "~0.5.1"
}
}
然后我們可以在gulpfile.js中使用gulp-load-plugins來幫我們加載插件：
var gulp = require('gulp');
//加載gulp-load-plugins插件，并馬上運行它
var plugins = require('gulp-load-plugins')();
然后我們要使用gulp-rename和gulp-ruby-sass這兩個插件的時候，就可以使用plugins.rename和plugins.rubySass來代替了,也就是原始插件名去掉gulp-前綴，之后再轉換為駝峰命名。
最后要提醒的一點是，因為gulp-load-plugins是通過package.json文件來加載插件的，所以必須要保證你需要自動加載的插件已經寫入到了package.json文件里，并且這些插件都是已經安裝好了的。
2.重命名
安裝：npm install --save-dev gulp-rename
用來重命名文件流中的文件。用gulp.dest()方法寫入文件時，文件名使用的是文件流中的文件名，如果要想改變文件名，那可以在之前用gulp-rename插件來改變文件流中的文件名。
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require("gulp-uglify");
gulp.task('rename', function () {
gulp.src('js/jquery.js')
.pipe(uglify()) //壓縮
.pipe(rename('jquery.min.js')) //會將jquery.js重命名為jquery.min.js
.pipe(gulp.dest('js'));
//關于gulp-rename的更多強大的用法請參考https://www.npmjs.com/package/gulp-rename
});
3. js文件壓縮
使用gulp-uglify
安裝：npm install --save-dev gulp-uglify
用來壓縮js文件，使用的是uglify引擎
var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
gulp.src('js/*.js') // 要壓縮的js文件
.pipe(uglify()) //使用uglify進行壓縮,更多配置請參考：
.pipe(gulp.dest('dist/js')); //壓縮后的路徑
});
4.css文件壓縮
使用gulp-minify-css
安裝：npm install --save-dev gulp-minify-css
要壓縮css文件時可以使用該插件
var gulp = require('gulp'),
minifyCss = require("gulp-minify-css");
gulp.task('minify-css', function () {
gulp.src('css/*.css') // 要壓縮的css文件
.pipe(minifyCss()) //壓縮css
.pipe(gulp.dest('dist/css'));
});
5.html文件壓縮
安裝：npm install --save-dev gulp-minify-html
用來壓縮html文件
var gulp = require('gulp'),
minifyHtml = require("gulp-minify-html");
gulp.task('minify-html', function () {
gulp.src('html/*.html') // 要壓縮的html文件
.pipe(minifyHtml()) //壓縮
.pipe(gulp.dest('dist/html'));
});
6. js代碼檢查
安裝：npm install --save-dev gulp-jshint
用來檢查js代碼
var gulp = require('gulp'),
jshint = require("gulp-jshint");
gulp.task('jsLint', function () {
gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter()); // 輸出檢查結果
});
7.文件合并
安裝：npm install --save-dev gulp-concat
用來把多個文件合并為一個文件,我們可以用它來合并js或css文件等，這樣就能減少頁面的http請求數了
var gulp = require('gulp'),
concat = require("gulp-concat");
gulp.task('concat', function () {
gulp.src('js/*.js') //要合并的文件
.pipe(concat('all.js')) // 合并匹配到的js文件并命名為 "all.js"
.pipe(gulp.dest('dist/js'));
});
8.less和sass的編譯
less使用gulp-less,
安裝：npm install --save-dev gulp-less
var gulp = require('gulp'),
less = require("gulp-less");
gulp.task('compile-less', function () {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
sass使用gulp-sass
安裝：npm install --save-dev gulp-sass
var gulp = require('gulp'),
sass = require("gulp-sass");
gulp.task('compile-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
9. 圖片壓縮
可以使用gulp-imagemin插件來壓縮jpg、png、gif等圖片。
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png圖片壓縮插件
gulp.task('default', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant來壓縮png圖片
}))
.pipe(gulp.dest('dist'));
});
gulp-imagemin的使用比較復雜一點，而且它本身也有很多插件，建議去它的項目主頁看看文檔
10. 瀏覽器自動刷新
這里我使用browsersync插件
安裝:npm install browser-sync gulp --save-dev
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// 靜態服務器
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 代理
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "你的域名或IP"
});
});
參考文章
前端構建工具gulpjs的使用介紹及技巧
