gulp是基於流的前端自動化構建工具。
gulp是基於stream流的形式，也就是前一個函式（工廠）製造出結果，提供後者使用。
同樣的，也是包括基本用法和各外掛的使用。
二、基本用法--外掛使用
gulp所支援的外掛也是很多的，使用方式跟基本的nodejs差不多。
下面統一介紹幾個常見的 外掛 ，更詳細用法可以到對應官方站點檢視API
- sass的編譯（ gulp-ruby-sass ）
- 自動新增css字首（ gulp-autoprefixer ）
- 壓縮css（ gulp-minify-css ）(後來發現我用的是 gulp-clean-css 壓縮css檔案)
- js程式碼校驗（ gulp-jshint ）
- 合併js檔案（ gulp-concat ）
- 壓縮js程式碼（ gulp-uglify ）
- 壓縮html檔案（gulp-html-minify）
- 壓縮圖片（ gulp-imagemin ）
- 重新命名（ gulp-rename ）
- 自動重新整理頁面（ gulp-livereload ）
- 圖片快取，只有圖片替換了才壓縮（ gulp-cache ）
- 更改提醒（ gulp-notify ）
- 清除檔案（ del ）
使用它們，就要先install,可以直接在package.json中直接配置devDependencies依賴項，然後再統一 npm install
以下只是本人使用前端自動化gulp的一些方法，僅供參考
1、開啟cmd，輸入 npm install -g gulp ,在全域性環境下安裝gulp
2、回車，進入你想要壓縮的資料夾裡面，輸入 npm install --save-dev gulp，在區域性環境安裝gulp
3、再來按照你的專案有什麼檔案壓縮什麼檔案，一般在cmd通常都要壓縮html、js、css和圖片，或是合併。。。
4、在cmd 輸入 npm install --save-dev gulp-uglify js檔案壓縮
npm install --save-dev gulp-clean-css css檔案壓縮
npm install --save-dev gulp-html-minify html檔案壓縮
npm install --save-dev gulp-imagemin 圖片壓縮
npm install --save-dev gulp-autoprefixer 自動新增css字首
npm install --save-dev gulp-contact 合併檔案
5、接下來就是程式碼了
// 1、先裝全域性變數
// 2、再裝本地
var gulp = require("gulp");
// 3、壓縮程式碼的模組，還需要本地安裝 gulp-uglify
var uglify = require("gulp-uglify");//壓縮js
var cssmin = require("gulp-clean-css");//壓縮css
var htmlmin = require("gulp-html-minify");//壓縮html
var imgmin = require("gulp-imagemin");//壓縮圖片
var concat = require("gulp-concat");//合併檔案
var autoprefixer = require("gulp-autoprefixer");//新增字首
//壓縮JS
gulp.task("jsmin",function(argument){
this.src("./public/js/audio.js") //壓縮js檔案原件的路徑
.pipe(uglify()) //使用uglify() 方法壓縮
.pipe(gulp.dest("./dist/js")) //檔案壓縮的最終目的是/dist/js資料夾裡面
})
//合併檔案
gulp.task("jsmin",function(argument){
this.src("./public/js/*") //* 代表 兩個或兩個以上的檔案
.pipe(uglify()) //使用uglify() 方法壓縮
.pipe(concat("all.min.js")) //使用concat方法 將兩個或兩個以上的檔案壓縮到 all.min.js 檔案裡面
.pipe(gulp.dest("./dist/js")) //檔案壓縮的最終目的是/dist/js資料夾裡面
})
//壓縮css
gulp.task("cssmin",function(argument){
this.src("./public/css/song.css")
.pipe(autoprefixer({ //autoprefixer 方法 自動新增css字首
browsers:['last 2 versions'], //瀏覽器的版本
cascade:true
}))
.pipe(cssmin()) //使用cssmin() 方法壓縮
.pipe(gulp.dest("./dist/css")) //檔案壓縮的最終目的是/dist/css資料夾裡面
})
//壓縮html
gulp.task("htmlmin",function(argument){
this.src("./*.html")
.pipe(htmlmin())
.pipe(gulp.dest("./dist"))
})
//壓縮img
gulp.task("imgmin",function(argument){
this.src("./public/img/*") //所有的圖片
.pipe(imgmin()) //使用imagemin() 方法壓縮圖片
.pipe(gulp.dest("./dist/image")) //檔案壓縮的最終目的是/dist/image資料夾裡面
})
gulp.task("default",function(argument){
gulp.run(["jsmin","cssmin","htmlmin","imgmin"]);
})