gulp自動化建構工具gulp-connect插件配置伺服器實作熱更新+自動重新整理

var gulp = require("gulp"),
	sass = require("gulp-sass"),
	cssmin = require("gulp-clean-css"),
	rename = require("gulp-rename"),
	connect = require("gulp-connect");

gulp.task("sass-min-rename", function(){
	gulp.src("./SASS/*.scss")
		.pipe(sass()) //編譯
		.pipe(gulp.dest("./dist/css"))//編譯後儲存
		.pipe(cssmin())//壓縮
		//這裡css沒有合并為一個檔案，要重命名就在rename傳回調函數在基礎名之上修改（直接改就直接傳改後的檔案名）
		.pipe(rename(function(filename){
			filename.basename += ".min"
		}))
		.pipe(gulp.dest("./dist/css"));//再将壓縮并重命名後的所有css儲存
})

gulp.task("copy-index", function(){
	gulp.src("./index.html")
		.pipe(gulp.dest("./dist"));
})

gulp.task("watch", function(){//監聽任務
	gulp.watch("./index.html", ["copy-index"]);
	gulp.watch("./SASS/*.scss", ["sass-min-rename"]);
	gulp.watch("./dist/**/*.*", ["reload"]);//監聽dist下所有檔案
})

gulp.task("reload", function(){
	gulp.src("./dist/**/*.html")
		.pipe(connect.reload());
})

gulp.task("server", function(){//配置熱更新伺服器
	connect.server({
		root: "./dist",
		livereload: true,
		port: 8030
	})
})

/*wacth和server指令隻能運作一個，是以可以用default同時執行多個任務，指令行直接gulp執行*/
gulp.task("default", ["server", "watch"], function(){});//函數可以不傳
           

gulp是基于Nodejs的自動任務運作器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等檔案的的測試、檢查、合并、壓縮、格式化、浏覽器自動重新整理、部署檔案生成，并監聽檔案在改動後重複指定的這些步驟。

使用步驟：

安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運作任務

a. 安裝 NodeJS

node -v

npm -v

使用 npm 安裝包：

npm install <name> [-g] [--save-dev]

b. 選裝 cnpm

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

安裝包：

cnpm install <name> [-g] [--save-dev]

c. 全局安裝 gulp

cnpm install gulp -g

以上步驟執行一次即可。以下步驟在每個項目中執行：

d. 在項目目錄下生成 package.json 檔案：

在指令提示符下進入項目目錄，然後執行：

cnpm init

可以一路回車生成 package.json 檔案

e. 在項目目錄下本地安裝 gulp：

cnpm install gulp --save-dev

本地安裝的資源都放在 node_modules 檔案夾下

f. 項目本地安裝 gulp 插件()：

壓縮CSS插件：

gulp-clean-css

cnpm install gulp-clean-css --save-dev

壓縮JS：

gulp-uglify

cnpm install --save-dev gulp-uglify

HTML壓縮：

gulp-htmlmin

cnpm install --save-dev gulp-htmlmin

SASS編譯：

gulp-sass

cnpm i gulp-sass --save-dev

(可能還需要安裝 node-sass )

自動重新整理：

gulp-livereload

web伺服器

gulp-connect(内置有 livereload 功能)

g. 配置 gulpfile.js 檔案

// 引入使用到的子產品

let gulp = require("gulp"),

minifyCss = require("gulp-clean-css");

var gulp = require("gulp"),
	uglify = require("gulp-uglify"),
	sass = require("gulp-sass"),
	connect = require("gulp-connect"),
	htmlmin = require("gulp-htmlmin"),
	babel = require("gulp-babel"),
	plumber = require("gulp-plumber"),
	_root = "dist";

// 啟動伺服器
gulp.task("server", function(){
	connect.server({
		root : _root,
		livereload : true
	});
});

// 壓縮JS
gulp.task("js", function(){
	gulp.src("src/js/**/*.js")
		.pipe(plumber())
		.pipe(babel({
            presets: ['env']
        }))
		.pipe(uglify())
		.pipe(gulp.dest("dist/js"))
		.pipe(connect.reload());
});

// 定義 gulp 任務，壓縮 HTML
gulp.task("html", function(){
	gulp.src(["src/**/*.html"])
		.pipe(htmlmin({collapseWhitespace: true, minifyCSS:true, minifyJS:true}))
		.pipe(gulp.dest("dist"))
		.pipe(connect.reload());
});

// 定義任務，編譯 sass
gulp.task("sass", function(){
	gulp.src("src/sass/**/*.scss")
		.pipe(plumber())
		.pipe(sass({outputStyle:"compressed"}))
		.pipe(gulp.dest(_root + "/css"))
		.pipe(connect.reload());
});

// 将圖檔、庫、模拟的假資料複制到 dist 下
gulp.task("images", function(){
	gulp.src("src/images/**/*.*")
		.pipe(gulp.dest("dist/images"));
});
gulp.task("lib", function(){
	gulp.src("src/lib/**/*.*")
		.pipe(gulp.dest("dist/lib"));
});
gulp.task("mock", function(){
	gulp.src("src/mock/**/*.*")
		.pipe(gulp.dest("dist/mock"));
});
gulp.task("copyfile", ["images", "mock", "lib"]);

gulp.task("watch", function(){
	gulp.watch("src/sass/**/*.scss", ["sass"]);
	gulp.watch("src/js/**/*.js", ["js"]);
	gulp.watch(["src/**/*.html"], ["html"]);
});

gulp.task("default", ["html", "js", "sass", "copyfile", "server", "watch"]);