分享HTML5自動化建構工具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*.html",["html"]);

gulp.watch("src/js*.js",["js"]);

});

//定制預設（預設）任務

gulp.task("default",["html","js","sass","copy","connect","watch"])

8. 在指令行中執行任務：

gulp 任務名稱

或 gulp

9.本地通路localhost或本機IP即可運作項目

Gulp運作成功結果如下：