導入工具包
```
var gulp = require('gulp');????????????????????????????//導入工具包 require('node_modules里對應模塊')
var fileinclude = require('gulp-file-include');????????//html include導入
var rev = require('gulp-rev-append');??????????????????//添加版本號
var less = require('gulp-less');???????????????????????//less轉譯css
var autoprefixer = require('gulp-autoprefixer');???????//css自動添加前綴
var htmlmin = require('gulp-htmlmin');?????????????????//壓縮html
var imagemin = require('gulp-imagemin');???????????????//壓縮圖片
var cssmin = require('gulp-clean-css');????????????????//壓縮css
var uglify= require('gulp-uglify');????????????????????//壓縮js
var gulpSequence = require('gulp-sequence');???????????//gulp任務序列加載
var concat = require('gulp-concat');???????????????????//文件合并
var cheerio = require('gulp-cheerio');?????????????????//替換頁面引用路徑
var rename= require('gulp-rename');????????????????????//替換文件名
```
設置路徑
```
var PATH = {
????src:'./src/',??????????????????????????????????????//源碼
????dev:'./dev/',??????????????????????????????????????//開發
????build:'./dist/'????????????????????????????????????//發布
}
```
html include
```
gulp.task('htmlinclude', function() {
????return gulp.src([ PATH.src+'html/**/*.html','!'+PATH.src+'html/template/*.html']) //該任務針對的文件
????????.pipe(fileinclude({
????????????????prefix: '@@',//變量前綴 @@include
????????????????basepath: '@file',//引用文件路徑
????????????????indent:true//保留文件的縮進
????????????}))
????????.pipe(gulp.dest( PATH.dev + 'html' )); //輸出文件路徑
});
```
html 添加版本號
```
gulp.task('addversion', function () {
????return gulp.src( PATH.dev + 'html/*.html') //該任務針對的文件
????????.pipe(rev()) //該任務調用的模塊
????????.pipe(gulp.dest( PATH.dev + 'html' )); //輸出文件路徑
});
```
less轉css
```
gulp.task('less2css', function () {
????return gulp.src([ PATH.src + 'less/*.less','!'+PATH.src+'less/common.less' ]) //該任務針對的文件
????????.pipe(less()) //該任務調用的模塊
????????.pipe(gulp.dest( PATH.dev + 'css')) //輸出文件路徑
});
```
添加css前綴
```
gulp.task('addprefix', function () {
????return gulp.src( PATH.dev + 'css/*.css')
????????.pipe(autoprefixer({
????????????????browsers: ['last 2 versions', 'Android >= 4.0'],
????????????????cascade: true, //是否美化屬性值 默認：true 像這樣：
????????????????//-webkit-transform: rotate(45deg);
????????????????// transform: rotate(45deg);
????????????????remove:true //是否去掉不必要的前綴 默認：true
????????????}))
????????.pipe(gulp.dest( PATH.dev + 'css'))
});
```
復制文件
```
gulp.task('devjs',function(){
????gulp.src( PATH.src + 'js/*' )
????????.pipe(gulp.dest( PATH.dev + 'js' ))
????return gulp.src( PATH.src+'img/*')
????????.pipe(gulp.dest( PATH.dev + 'img' ))
});
```
壓縮html
```
gulp.task('htmlmin', function () {
????return gulp.src( PATH.dev + 'html/*.html') //該任務針對的文件
????????.pipe(htmlmin({ //該任務調用的模塊
????????????????removeComments: true,//清除HTML注釋
????????????????collapseWhitespace: true,//壓縮HTML
????????????????collapseBooleanAttributes: true,//省略布爾屬性的值 ==>
????????????????removeEmptyAttributes: true,//刪除所有空格作屬性值 ==>
????????????????removeScriptTypeAttributes: true,//刪除的type="text/javascript"
????????????????removeStyleLinkTypeAttributes: true,//刪除和的type="text/css"
????????????????minifyJS: true,//壓縮頁面JS
????????????????minifyCSS: true//壓縮頁面CSS
????????????}))
????????.pipe(gulp.dest( PATH.build + 'html')); //輸出文件路徑
});
```
壓縮img
```
gulp.task('imagemin', function () {
????return gulp.src( PATH.dev + 'img/*.{png,jpg,gif,ico}') //該任務針對的文件
????????.pipe(imagemin()) //該任務調用的模塊
????????.pipe(gulp.dest( PATH.build + 'img')); //輸出文件路徑
});
```
壓縮css
```
gulp.task('cssmin', function () {
????return gulp.src( PATH.dev + 'css/*.css')
????????.pipe(cssmin()) //該任務調用的模塊
????????.pipe(gulp.dest( PATH.build + 'css')) //輸出文件路徑
})
```
壓縮Js
```
gulp.task('jsmin', function () {
????return gulp.src([ PATH.dev + 'js/*.js'])//該任務針對的文件
????????.pipe(uglify({ //該任務調用的模塊
????????????????mangle: true, //類型：Boolean 默認：true 是否修改變量名
????????????????compress: true //類型：Boolean 默認：true 是否完全壓縮
????????????}))
????????.pipe(gulp.dest( PATH.build + 'js')); //輸出文件路徑
});
```
序列執行
```
gulp.task('devhtml',gulpSequence('htmlinclude','addversion'));
gulp.task('devcss',gulpSequence('less2css','addprefix'));
gulp.task('dev',gulpSequence(['devhtml','devcss','devjs','devimg']));
gulp.task('build',gulpSequence('dev',['htmlmin','imagemin','cssmin','jsmin']));
```
默認任務
```
gulp.task('default',['build']);
```
watch監聽
```
gulp.task('watch',function(){
????gulp.watch( PATH.src + 'less/**/*.less',['less2css']);
????gulp.watch( PATH.src + 'html/**/*.html',['htmlinclude']);
????gulp.watch( PATH.src + 'js/**/*.js',['devjs']);
})
```
備注
```
//gulp.task(name,[deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數
//gulp.src(globs,[options]) 執行任務處理的文件 globs：處理的文件路徑(字符串或者字符串數組)
//gulp.src(['js/*.js', '!src/js/**/{test1,test2}.js'])//該任務針對的文件(以及忽略的文件)寫法
//gulp.dest(path,[options]) 處理完后文件生成路徑
```
