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/*.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運行成功結果以下：