一個完整的gulp例子（含註釋）親測可用

// 1.引入gulp 獲取 gulp
const gulp = require('gulp')

// 2.引入gulp須要用的各個類型插件
const less = require('gulp-less')
const csso = require('gulp-csso') //這個插件做用是壓縮css的
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')
const imagemin = require('gulp-imagemin')
const sass =require('gulp-sass')

// 3.定義任務

//3.0 沒有less sass 處理css
gulp.task('style', function(){
gulp.src(['./css/*.*']) // 匹配到指定的css文件*表明全部
.pipe(csso()) //把轉化的css壓縮 不寫不壓縮
.pipe(gulp.dest('./dist/css')) //把這些操做過的文件放到哪一個文件夾

})

// 3.1 處理less
//gulp.task('style', function(){
//gulp.src(['./less/*.*']) // 匹配到指定的less文件*表明全部
// .pipe(less()) // 將less轉換爲css
// .pipe(csso()) //把轉化的css壓縮 不寫不壓縮
//.pipe(gulp.dest('./dist/css')) //把這些操做過的文件放到哪一個文件夾

// })

// 3.1處理sass
//gulp.task('sass', function(){
// gulp.src(['./sass/*.*']) // 匹配到指定的less文件*表明全部
// .pipe(sass()) // 將sasss轉換爲css
// .pipe(csso()) //把轉化的css壓縮 不寫不壓縮
// .pipe(gulp.dest('./dist/css')) //把這些操做過的文件放到哪一個文件夾

// })

// 3.2 處理js
gulp.task('script', function(){
gulp.src(['./js/*.js']) // 匹配到指定的less文件 *表明全部
.pipe(uglify()) //壓縮 獲取到的js 不寫不壓縮
.pipe(gulp.dest('./dist/js')) //把這些操做過的文件放到哪一個文件夾
})

// 3.3 處理html 由於html文件內可能有js可能有css因此須要條件
gulp.task('html', function(){
//html可能不都是在一個目錄用數組就能夠寫多個路徑
gulp.src(['./*.html'])
.pipe(htmlmin({ //壓縮 獲取到的html
collapseWhitespace:true, // 以下
minifyCSS: true, // 以下
minifyJS: true // 以下
}))
.pipe(gulp.dest('./dist')) //輸出到哪一個文件夾
})

//3.4 處理圖片
gulp.task('images', function () {
// 1. 找到圖片
gulp.src(['./images/*.*'])
// 2. 壓縮圖片
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./dist/images'))
});

// 若是這個任務名不是`default`,則執行該任務時，須要在cmd中輸入:
//`gulp +你定義的名字` 或者你要是嫌麻煩乾脆把名字像下邊是的就寫default

gulp.task('default', function(){
// watch是用來監視文件的變化，而後當文件變化時，執行指定的任務
// 第一個參數是要監視的文件
// **/*.* 表示 任意目錄下的任意文件 **表示任意文件夾
// 第二個參數是要執行的任務
gulp.watch('./**/*.*',['html','script','style','images'])
})

// html壓縮經常使用方法：

//collapseWhitespace: true, //壓縮html // collapseBooleanAttributes: true, //省略布爾屬性的值 // removeComments: true, //清除html註釋 // removeEmptyAttributes: true, //刪除全部空格做爲屬性值 // removeScriptTypeAttributes: true, //刪除type=text/javascript // removeStyleLinkTypeAttributes: true, //刪除type=text/css // minifyJS:true, //壓縮頁面js // minifyCSS:true //壓縮頁面css