gulp自動化構建工具

參考網址：
https://www.gulpjs.com.cn/
http://www.ydcss.com/archives/18

gulp是基於Nodejs的自動任務執行器， 它能自動化地完成 javascript/coffee/sass/less/html/image/css 等檔案的的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。

安裝及使用方法

使用：

安裝nodejs -> 全域性安裝gulp -> 專案安裝gulp以及gulp外掛 -> 配置gulpfile.js -> 執行任務

1. 安裝NodeJS
package.json – 是NodeJS專案的配置檔案，使用 npm init -y 生成該檔案

 npm install package-name --save-dev

– 安裝包資源
– --save-dev 是將安裝的包資源資訊儲存到 package.json 檔案中

選裝 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 全域性安裝 gulp
命令： cnpm install gulp -g

以上步驟全域性安裝（安裝NodeJS、安裝cnpm、安裝gulp）只做一次即可 以下操作步驟每個專案下都按步驟執行即可

3. 專案目錄下使用cmd生成 package.json 檔案：
命令：npm init -y

4. 專案安裝 gulp，即在專案目錄下安裝： 命令：cnpm i gulp --save-dev – i 是 install 的簡寫 安裝好後，會在專案目錄下生成 node_modules 的資料夾，會將安裝的 gulp 包資源資訊新增到 package.json 檔案的 “devDependencies” 物件屬性中。

5. 安裝 gulp 外掛：

gulp-clean-css：壓縮CSS（原來的gulp-minify-css不推薦使用）

cnpm i gulp-clean-css -D

– i是install的簡寫
– D是–save-dev的簡寫

gulp-htmlmin：壓縮HTML

cnpm i gulp-htmlmin -D

gulp-uglify：壓縮JS

cnpm i gulp-uglify -D

gulp-babel：將ES6程式碼轉換為ES5程式碼

cnpm install -D [email protected] babel-core babel-preset-env

gulp-connect：webserver，支援瀏覽器自動重新整理(瀏覽器中安裝livereload外掛，不是必須的)

cnpm install --save-dev gulp-connect

gulp-sass：編譯sass檔案(字尾為 .scss 的檔案)

cnpm install --save-dev gulp-sass

6. 編寫配置 gulpfile.js 檔案（通常在專案根目錄下建立該檔案）

// 引入使用的模組

 const gulp = require("gulp"), 			
    minifyCss = require("gulp-clean-css"), // 壓縮CSS
    sass = require("gulp-sass"),//sass檔案轉化為css檔案
    babel = require("gulp-babel"),//es6轉換es5
    uglify = require("gulp-uglify"),//壓縮js
    htmlmin = require("gulp-htmlmin"),//壓縮html
    connect = require("gulp-connect");//瀏覽器自動重新整理
    //有需要的模組就按照以上方式引入

// 定製任務

gulp.task("css", function() {//壓縮css的任務，任務名為css
	gulp.src("sass/**/*.scss")//編譯檔案路徑
		.pipe(sass())
		.pipe(minifyCss())
		.pipe(gulp.dest("dist/css"))//上線檔案路徑（自動生成）
		.pipe(connect.reload());//伺服器重連，有了它才能自動重新整理你更改的內容
});
gulp.task("js",()=>{//壓縮js的任務，任務名為js
	gulp.src("js/**/*.js")
		.pipe(babel({
      	 presets: ['env']
   	 }))
		.pipe(uglify())
		.pipe(gulp.dest("dist/js"))
		.pipe(connect.reload())
});
var ops ={
	minifyJS: true,//壓縮內含的JS
    minifyCSS: true//壓縮內含的CSS
    removeComments: true,//清除HTML註釋
    collapseWhitespace: true//壓縮HTML
   //還有其他的自行百度gulp-htmlmin外掛
}
gulp.task("html",()=>{//壓縮html的任務
	gulp.src("./index.html")
	.pipe(htmlmin(ops))
	.pipe(gulp.dest("dist"))
	gulp.src("html/**/*.html")
	.pipe(htmlmin({ops}))
	.pipe(gulp.dest("dist/html"))
	.pipe(connect.reload())
});
gulp.task("conn",()=>{//瀏覽器自動重新整理
	connect.server({
		livereload:true,
		root:"dist"
	});
});

gulp.task("watch",()=>{//監視檔案改動，此外掛gulp自帶
	gulp.watch("index.html",["html"]);
	gulp.watch("scss/**/*.scss",["sass"]);
	gulp.watch("css/**/*.css",["css"]);
	gulp.watch("js/**/*.js",["js"]);
	gulp.watch("html/**/*.html",["html-html"]);
	gulp.watch("imgs/**/*.*",["imgs-copy"]);
	gulp.watch("lib/**/*.*",["lib-copy"])
});
gulp.task("default",["html","css","js","imgs-copy","lib-copy","conn","watch"]);
//定製預設任務，一次性執行所有任務

7. 執行gulp任務 命令：gulp +任務名預設任務命令為：gulp
http-server 零配置伺服器(webserver)，用於部署靜態資源（html、css、js、image…） 預設埠號為：8080。使用localhost:8080訪問

cnpm install http-server -g