詳細講解自動化構建工具gulp使用
gulp是是前端開發對程式碼進行構建的工具，是基於 Nodejs 的自動任務執行器，他能自動化地完成 javascript/coffee/sass/less/html/image/css 等檔案的的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。在開發中使用能有效提高工作效率，使用：
既是基於Nodejs的任務執行器，自然就需要先安裝Nodejs環境，以下便是安裝步驟：
安裝nodejs -> 全域性安裝gulp -> 專案安裝gulp以及gulp外掛 -> 配置gulpfile.js -> 執行任務
1. 安裝 NodeJS 環境
到nodeJS官網選擇下載，執行安裝包安裝即可。
2.初始化，生成package.json 檔案：
在專案資料夾下開啟命令提示符執行下列命令（開啟方式：shift+滑鼠右鍵，在此處開啟明亮視窗）：
npm init
選裝 cnpm( npm淘寶映象 )：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 全域性安裝 gulp
npm install gulp -g
全域性安裝好後，可以在命令提示符下使用 gulp 的命令列工具（使用 gulp 命令）
gulp -v
**以上全域性安裝一次即可**
4. 在專案目錄中生成 package.json 檔案
npm init
使用預設輸入，一路回車即可
或：npm init -y
5. 在專案本地安裝 gulp(安裝好後，在專案目錄下生成 node_modules 資料夾)
npm install gulp --save-dev
或
npm i gulp --save-dev
或
npm i gulp -D
6. 安裝 gulp 外掛：
gulp-clean-css(壓縮CSS)
npm install gulp-clean-css -D
gulp-htmlmin(壓縮html)
npm i gulp-htmlmin -D
gulp-babel(將ES6的程式碼轉換為ES5的程式碼)
npm install gulp-babel babel-core babel-preset-env --save-dev
gulp-uglify(壓縮JS)
npm i gulp-uglify -D
gulp-rename(重新命名)
npm i gulp-rename -D
gulp-imagemin(壓縮圖片)
gulp-concat(合併檔案)
gulp-connect ( webserver 能夠部署靜態資源，能夠實現瀏覽器自動重新整理--需要瀏覽器外掛支援--livereload)
npm i gulp-connect（連線）
7. 在專案根目錄下，建立 gulpfile.js(固定名稱) 的檔案：
**gulpfile.js：**
//引入模組
const gulp = require("gulp"),
connect = require("gulp-connect"),
sass = require("gulp-sass");
//定製，啟動伺服器
gulp.task("connect",function(){
connect.server({
root:"dist",//webserver的根目錄
livereload:true//瀏覽器自動重新整理
});
});
//複製HTML檔案到dist目錄下，讓HTML頁面重新載入
gulp.task("html",function(){
gulp.src("src/**/*.html")
.pipe(gulp.dest("dist"))
.pipe(connect.reload());
});
//複製js檔案到dist目錄下,js重新載入
gulp.task("js",function(){
gulp.src("src/js/**/*.js")
.pipe(gulp.dest("dist/js"))
.pipe(connect.reload());//瀏覽器自動重新整理
});
//複製lib目錄到dist下
gulp.task("copy-lib",function(){
gulp.src("src/lib/**/*.*")
.pipe(gulp.dest("dist/lib"))
});
//複製img目錄到dist下
gulp.task("copy-img",function(){
gulp.src("src/img/**/*.*")
.pipe(gulp.dest("dist/img"))
});
//複製mock目錄到dist下
gulp.task("copy-mock",function(){
gulp.src("src/mock/**/*.*")
.pipe(gulp.dest("dist/mock"))
});
gulp.task("copy",["copy-lib","copy-img","copy-mock"])
//編譯*.scss檔案為*.css
gulp.task("sass",function(){
gulp.src("src/sass/*.scss")
.pipe(sass({outputStyle:"compressed"}))
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload());
})
//監視檔案的修改
gulp.task("watch",function(){
gulp.watch("src/sass/*.scss",["sass"]);
gulp.watch("src/**/*.html",["html"]);
gulp.watch("src/js/**/*.js",["js"]);
});
//定製預設（預設）任務
gulp.task("default",["html","js","sass","copy","connect","watch"])
8. 在命令列中執行任務：
gulp 任務名稱
或 gulp
9.本地訪問localhost或本機IP即可執行專案
Gulp執行成功結果如下：