資訊專欄INFORMATION COLUMN
摘要：通過本文，我們將學習如何使用來改變開發流程，從而使開發更加快速高效。中文網站詳細入門教程使用是基于的，需要要安裝為了確保依賴環境正確，我們先執行幾個簡單的命令檢查。詳盡使用參見官方文檔，中文文檔項目地址
為了UED前端團隊更好的協作開發同時提高項目編碼質量，我們需要將Web前端使用工程化方式構建；
目前需要一些簡單的功能：
1. 壓縮HTML 2. 檢查JS 3. 編譯SASS 4. 壓縮圖片 5. 壓縮CSS 6. 壓縮JS 7. 雪碧圖制作 8. 靜態服務器 9. 代理解決跨域 10. 打包項目
目前最知名的構建工具： Gulp、Grunt、NPM + Webpack；
grunt是前端工程化的先驅 gulp更自然基于流的方式連接任務 Webpack最年輕，擅長用于依賴管理，配置稍較復雜
PC端項目，我們推薦使用Gulp，Gulp基于nodejs中stream，工作流，效率更好語法更自然,不需要編寫復雜的配置文件
演示項目
順手一下，star或者fork初識 gulp
簡介
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp是基于Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定的這些步驟。在實現上，她借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。通過本文，我們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。
gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構建工作。
Gulp 中文網站
gulp詳細入門教程
Gulp使用Gulp是基于 Node.js的，需要要安裝 Node.js
為了確保依賴環境正確，我們先執行幾個簡單的命令檢查。
node -v
Node是一個基于Chrome JavaScript V8引擎建立的一個解釋器
檢測Node是否已經安裝，如果正確安裝的話你會看到所安裝的Node的版本號
接下來看看npm，它是 node 的包管理工具，可以利用它安裝 gulp 所需的包
npm -v
這同樣能得到npm的版本號，裝 Node 時已經自動安裝了npm
npm介紹
npm install -g gulp 全局安裝 gulp gulp -v 得到gulp的版本號，確認安裝成功
基礎安裝結束
選裝cnpm因為npm安裝插件是從國外服務器下載，受網絡影響大，這里建議使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.orgcmd命令小技巧
創建空文件夾 mkdir name name是文件夾名稱
創建空文件 cd.> name.txt
刪除文件夾 rd/s/q name name是文件夾名稱 （物理刪除）
tree命令 tree /f 顯示樹形結構
tree /f > tree.txt 導出目錄
集合功能
HTML組件化和壓縮
編譯Sass和壓縮css
檢查Javascript
編譯es6語法
壓縮Javascript
無損壓縮圖片
雪碧圖制作
創建靜態服務器
設置代理解決跨域
打包項目且生成壓縮包
結合webpack使用（選用）
項目目錄結構│ .babelrc
│ .eslintignore // eslint文件過濾
│ .eslintrc // eslint語法檢查
│ .gitignore // git文件過濾
│ config.js // 路徑配置文件
│ gulpfile.js // gulp配置文件
│ package.json // 依賴模塊json文件,npm install會安裝項目所有的依賴模塊
│ README.MD // 項目說明
│ webpack.config.js // webpack配置文件
│
├─build // 發布環境 和 預覽環境
|
├─node_modules // 依賴模塊包目錄
│
└─src // 開發環境項目
│ index.html // 啟動默認頁面
│
├─assets // 靜態資源
│ ├─css // 樣式文件
│ ├─images // 圖片文件
│ ├─js // js文件
│ └─lib // 插件文件
│
└─page // 頁面文件
gulpfile配置文件
常用的插件
gulp-sass: sass的編譯 gulp-autoprefixer: 自動添加css前綴 gulp-minify-css: 壓縮css一行 gulp-uglify: 壓縮js代碼 gulp-notify: 加控制臺文字描述用的 gulp-clean: 清理文件 gulp-file-include: include 文件用 gulp-imagemin: 圖片壓縮 imagemin-pngquant: 圖片無損壓縮 gulp-cache: 檢測文件是否更改 gulp-zip: 自動打包并按時間重命名 gulp-htmlmin: 壓縮html merge-stream: 合并多個 stream gulp-util: 打印日志 log gulp-plumber: 監控錯誤 gulp-babel: 編譯ES6 gulp-if: 條件判斷 gulp-sequence: 順序執行 gulp-eslint: 代碼風格檢測工具 del: 刪除文件制作雪碧圖 (支持同時制作多個)
規定如下
在src/assets/image中，sprite是作為需要制作雪碧圖的文件夾
在sprite文件夾下，必須新建一個文件夾，例如user文件夾，me文件，存放你的圖標
執行gulp sprites任務
任務完成，在src/assets/image中就會生成一個icon文件夾，里面就是生成的雪碧圖，在src/assets/css會生成雪碧圖的scss樣式文件
var srcDir = path.resolve(process.cwd(), config.sprite);
/**
* 獲取獲取文件名字和路徑
* @returns
*/
var iconFolder = function() {
var filesSrc = []; // 文件路徑
var filesName = []; // 文件名字
// 遍歷獲取文件名字和路徑
fs.readdirSync(srcDir).forEach(function(file, i){
var reg = /.(png|jpg|gif|ico)/g;
var isImg = file.match(reg);
// 判讀是 file.indexOf("sprite") != -1
if(!isImg){
filesName.push(file);
filesSrc.push(path.resolve(srcDir, file, "*.{png,jpg}"));
}
});
// 返回文件名字和路徑
return {
"name": filesName,
"src" : filesSrc
};;
}
/**
*
* 支持多個文件夾編譯生成雪碧圖
* 雪碧圖制作規定要求
* 在images文件夾下icon文件夾,新建一個文件夾就可以
*
*/
var csssPrites = function() {
var folder = iconFolder();
var folderName = folder.name;
var folderSrc = folder.src;
folderSrc.forEach(function (item, i) {
var imgName = `images/icon/icon_${folderName[i]}.png`;
var cssName = `css/icon_${folderName[i]}.scss`;
return gulp.src(item) // 需要合并的圖片地址
.pipe(spritesmith({
imgName: imgName, // 保存合并后圖片的地址
cssName: cssName, // 保存合并后對于css樣式的地址
padding: 10, // 合并時兩個圖片的間距
algorithm: "binary-tree", // 注釋1
cssTemplate: "./cssTemplate.tpl" // 模板
// cssTemplate: function (data) {
// var arr=[];
// data.sprites.forEach(function (sprite) {
// arr.push(".icon-"+sprite.name+
// "{" +
// "background-image: url(""+sprite.escaped_image+"");"+
// "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+
// "width:"+sprite.px.width+";"+
// "height:"+sprite.px.height+";"+
// "}
");
// });
// return arr.join("");
// }
}))
.pipe(gulp.dest("src/assets/"));
})
}
/* 生成雪碧圖 */
gulp.task("sprites", function () {
// 執行任務
csssPrites();
});
gulpfile.js內容
/**
* gulp 自動化構建工具
* gulpfile.js 配置文件
*
*/
var fs = require("fs");
var path = require("path");
var gulp = require("gulp");
var sass = require("gulp-sass"); // sass的編譯
var autoprefixer = require("gulp-autoprefixer"); // 自動添加css前綴
var minifycss = require("gulp-minify-css"); // 壓縮css一行
var uglify = require("gulp-uglify"); // 壓縮js代碼
var notify = require("gulp-notify"); // 加控制臺文字描述用的
var clean = require("gulp-clean"); // 清理文件
var fileinclude = require("gulp-file-include"); // include 文件用
var imagemin = require("gulp-imagemin"); // 圖片壓縮
var pngquant = require("imagemin-pngquant"); // 圖片無損壓縮
var cache = require("gulp-cache"); // 檢測文件是否更改
var zip = require("gulp-zip"); // 自動打包并按時間重命名
var htmlmin = require("gulp-htmlmin"); // 壓縮html
var mergeStream = require("merge-stream"); // 合并多個 stream
var gutil = require("gulp-util"); // 打印日志 log
var plumber = require("gulp-plumber"); // 監控錯誤
var babel = require("gulp-babel"); // 編譯ES6
var gulpif = require("gulp-if"); // 條件判斷
var minimist = require("minimist");
var gulpSequence = require("gulp-sequence"); // 順序執行
var eslint = require("gulp-eslint"); // 代碼風格檢測工具
var del = require("del"); // 刪除文件
var spritesmith = require("gulp.spritesmith"); // 生成雪碧圖 https://github.com/twolfson/gulp.spritesmith
// 結合webpack
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
// 靜態服務器和代理請求
var url = require("url");
var proxy = require("proxy-middleware");
var browserSync = require("browser-sync");
var reload = browserSync.reload;
// 代理請求 / 端口設置 / 編譯路徑
var config = require("./config.js");
// 區分開發和生產環境
var knownOptions = {
string: "env",
default: {
env: process.env.NODE_ENV || "development"
}
};
var options = minimist(process.argv.slice(2), knownOptions);
/**
* 開發環境和生產環境
* 先清空原先文件夾，在執行編譯或者打包
*
* @param {any} cb 回調
*/
var cnEnvironment = function(cb) {
// 先執行清空文件夾內容
del(config.rootBuild).then(paths => {
// 通知信息
gutil.log(gutil.colors.green("Message：Delete complete!"));
gutil.log(gutil.colors.green("Message：Deleted files and folders:", paths.join("
")));
// 執行項目打包
gulpSequence([
"htmlmin", "cssmin", "images", "jsmin", "libmin"
], function() {
gutil.log(gutil.colors.green("Message：Compile finished!"));
// 執行回調
cb && cb();
});
});
}
/**
* 錯誤輸出
*
* @param {any} error
*/
var onError = function(error){
var title = error.plugin + " " + error.name;
var msg = error.message;
var errContent = msg.replace(/
/g, "A "); // replace to `A`, `
` is not allowed in css content
// system notification
notify.onError({
title: title,
message: errContent,
sound: true
})(error);
// prevent gulp process exit
this.emit("end");
};
var srcDir = path.resolve(process.cwd(), config.sprite);
/**
* 獲取獲取文件名字和路徑
* @returns
*/
var iconFolder = function() {
var filesSrc = []; // 文件路徑
var filesName = []; // 文件名字
// 遍歷獲取文件名字和路徑
fs.readdirSync(srcDir).forEach(function(file, i){
var reg = /.(png|jpg|gif|ico)/g;
var isImg = file.match(reg);
// 判讀是 file.indexOf("sprite") != -1
if(!isImg){
filesName.push(file);
filesSrc.push(path.resolve(srcDir, file, "*.{png,jpg}"));
}
});
// 返回文件名字和路徑
return {
"name": filesName,
"src" : filesSrc
};;
}
/**
*
* 支持多個文件夾編譯生成雪碧圖
* 雪碧圖制作規定要求
* 在images文件夾下icon文件夾,新建一個文件夾就可以
*
*/
var csssPrites = function() {
var folder = iconFolder();
var folderName = folder.name;
var folderSrc = folder.src;
folderSrc.forEach(function (item, i) {
var imgName = `images/icon/icon_${folderName[i]}.png`;
var cssName = `css/icon_${folderName[i]}.scss`;
return gulp.src(item) // 需要合并的圖片地址
.pipe(spritesmith({
imgName: imgName, // 保存合并后圖片的地址
cssName: cssName, // 保存合并后對于css樣式的地址
padding: 10, // 合并時兩個圖片的間距
algorithm: "binary-tree", // 注釋1
cssTemplate: "./cssTemplate.tpl" // 模板
// cssTemplate: function (data) {
// var arr=[];
// data.sprites.forEach(function (sprite) {
// arr.push(".icon-"+sprite.name+
// "{" +
// "background-image: url(""+sprite.escaped_image+"");"+
// "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+
// "width:"+sprite.px.width+";"+
// "height:"+sprite.px.height+";"+
// "}
");
// });
// return arr.join("");
// }
}))
.pipe(gulp.dest("src/assets/"));
})
}
/* html 打包*/
gulp.task("htmlmin", function() {
var optionsSet = {
removeComments: true, // 清除HTML注釋
collapseWhitespace: true, // 壓縮HTML
collapseBooleanAttributes: true, // 省略布爾屬性的值 ==>
removeEmptyAttributes: false, // 刪除所有空格作屬性值 ==>
removeScriptTypeAttributes: false, // 刪除