GULP 是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具邓嘹，是自動化項目的構(gòu)建利器；她不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成捶码；使用她，我們不僅可以很愉快的編寫代碼或链，而且大大提高我們的工作效率惫恼。
常用的gulp插件：
sass 的編譯（ gulp-sass）
less 編譯 （ gulp-less）
重命名（ gulp-rename）
自動添加 css 前綴（ gulp-autoprefixer）
壓縮 css（ gulp-clean-css）
js 代碼校驗（ gulp-jshint）
合并 js 文件（ gulp-concat）
壓縮 js 代碼（ gulp-uglify）
壓縮圖片（ gulp-imagemin）
自動刷新頁面（ gulp-livereload，谷歌瀏覽器親測澳盐，谷歌瀏覽器需安裝 livereload 插件）
圖片緩存祈纯，只有圖片替換了才壓縮（ gulp-cache）
更改提醒（ gulp-notify）
插件使用
下面介紹gulp中的插件，
gulp-less插件
1叼耙、先在本地下載插件
cnpm install gulp-less --save-dev
2腕窥、在入口js文件（gulpfile.js或者index.js）中，寫代碼（任務(wù)代碼）
var g = require("gulp");
var gxx = require("gulp-xxxx");
g.task("任務(wù)名",function() {
g.src("目標(biāo)路徑")
.pipe(插件方法筛婉，如test_less())
.pipe(g.dest("任務(wù)完成后的路徑"));
});
gulp-htmlmin插件
安裝命令：cnpm install gulp-htmlmin --save-dev
var gulp = require("gulp");
var gulp_htmlmin = require("gulp-htmlmin");
var minjs = require('gulp-uglify');//autoprefixer插件模塊
gulp.task("test-htmlmin",function(){
var options = {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true
};
gulp.src("src/*.html")
.pipe(gulp_htmlmin(options))
.pipe(gulp.dest("dist/"))
});
gulp-minify-css插件
安裝命令：cnpm install gulp-minify-css --save-dev
var cssmin_minify = require('gulp-minify-css');
gulp.task("test-minify",function(){
gulp.src("src/css/*.css")
.pipe(cssmin_minify({
advanced: false,
compatibility: 'ie7',
keepBreaks: false,
keepSpecialComments: '*'
}))
.pipe(gulp.dest("dist/css/"))
});
gulp-sass插件
安裝命令：npm install –save-dev gulp-sass
var gulp = require('gulp'),
sass = require("gulp-sass");
gulp.task('test-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
gulp-uglify插件
安裝命令： cnpm install gulp-uglify --save-dev
var minjs = require('gulp-uglify');
gulp.task('jsmin', function () {
gulp.src(['src/js/address.js','src/js/cart.js','src/js/detail.js','src/js/index.js'])
//多個文件以數(shù)組形式傳入
.pipe(minjs())
.pipe(gulp.dest('dest/js'));
});
