gulp
前言
gulp是基於Nodejs的自動任務執行器，它能自動化地完成javascript/sass/less/html/image/css 等檔案的的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。（引用來自Kasmine的部落格）。
使用Gulp的優勢就是利用流的方式進行檔案的處理，使用管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，通過管道將多個任務和操作連線起來，因此只有一次I/O的過程，流程更清晰，更純粹。Gulp去除了中間檔案，只將最後的輸出寫入磁碟，整個過程因此變得更快（引用來自Kasmine的部落格）。
說起gulp我們都會談到一個名詞，便是前端自動化構建，接下來就前端自動化構建進行解釋。
前端自動化構建
“說到構建工具，我往往會在前面加「自動化」三個字，因為構建工具就是用來讓我們不再做機械重複的事情，解放我們的雙手的。”（引用來自知乎Jasin Yip的回答）。
gulp的安裝及基本使用
0. 安裝 node.js 及 cnpm 淘寶映象：
因為gulp是是基於Nodejs的自動任務執行器，所以必須安裝node.js。
由於npm是國外的，使用起來比較慢，我們這裡使用淘寶的cnpm映象來安裝外掛及應用，cnpm安裝指南。
1. 全域性安裝 gulp：
$ npm install --global gulp2. 作為專案的開發依賴（devDependencies）安裝：
$ npm install --save-dev gulp3. 在專案根目錄下建立一個名為 gulpfile.js 的檔案：
var gulp = require(`gulp`);
gulp.task(`default`, function() {
// 將你的預設的任務程式碼放在這
});4. 執行 gulp
$ gulp預設的名為 default 的任務（task）將會被執行，在這裡，這個任務並未做任何事情。
gulp的外掛使用
相關外掛用法請看對應連結，感謝原作者對外掛的解析，如有侵權請聯絡刪除謝謝。
按需配置好package.json 在根目錄npm install即可。
- node stream(流)
- gulp-sourcemaps（顯示編譯前位置）的用法
- gulp-autoprefixer（根據設定瀏覽器版本自動處理css屬性的瀏覽器字首）的用法
- gulp-less（less編譯）的用法及相關外掛
- gulp-sass（sass編譯）的用法及相關外掛
- gulp-clean-css(壓縮CSS檔案)的用法及相關外掛
- gulp-uglify（js壓縮外掛）的用法及相關外掛
- gulp-rename(檔案更名)的用法及相關外掛
- gulp-concat(js檔案合併)的用法及相關外掛
- gulp-imagemin(圖片壓縮)的用法
- gulp-changed(只通過更改過的檔案)的用法
- browsersync(瀏覽器實時重新整理)的用法
- babel(es6 編譯 es5)的用法
下面附上我自己的專案gulpfile的檔案原始碼
// gulp引入
let gulp = require(`gulp`);
// 路徑
let SRC = `./src`,// 入口資料夾
DIST = `./static`,// 出口資料夾
LESS_SRC = SRC + `/**/*.less`, // less編譯入口 (** 匹配js資料夾的0個或多個子資料夾)
JS_SRC = SRC + `/**/*.js`, // JS編譯入口 (* 匹配js資料夾下所有.js格式的檔案)
IMG_SRC = SRC + `/**/images/*.{png,jpg,gif,ico}`,// 圖片編譯入口
HTML = `./*.html`;// html檔案
//外掛
let less = require(`gulp-less`),// less編譯
sourcemaps = require(`gulp-sourcemaps`),// 瀏覽器顯示編譯前less或js位置
uglify = require(`gulp-uglify`),// 壓縮js檔案
pump = require(`pump`),// 可以使我們更容易找到程式碼出錯位置
cleanCSS = require(`gulp-clean-css`),// css壓縮
rename = require("gulp-rename"),// 檔案更名
autoprefixer= require(`gulp-autoprefixer`),// 根據設定瀏覽器版本自動處理css屬性的瀏覽器字首
concat = require(`gulp-concat`),// 合併javascript檔案，減少網路請求。
imagemin = require(`gulp-imagemin`),// 圖片壓縮
pngquant = require(`imagemin-pngquant`), // 深度壓縮
changed = require(`gulp-changed`),// 只通過更改過的檔案
browserSync = require(`browser-sync`).create(),//瀏覽器實時重新整理
babel = require(`gulp-babel`);// es6 編譯 es5
// 重新整理瀏覽器
let reload = browserSync.reload;
// less編譯
gulp.task(`less`, ()=> {
let options = {
browsers: [`last 5 versions`, `Android >= 4.0`],// 瀏覽器版本
cascade: true,//是否美化屬性值 預設：true 像這樣：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的字首 預設：true
};
return gulp.src([LESS_SRC,`!`+SRC+`/common/**/*.less`])// 除了common資料夾下的less全部編譯
.pipe(sourcemaps.init())// 啟用sourcemaps功能
.pipe(changed(DIST))// 只通過更改過的檔案
.pipe(less())// 執行less編譯操作
.pipe(autoprefixer(options))
.pipe(cleanCSS({
keepSpecialComments: `*`
//保留所有特殊字首 當你用autoprefixer生成的瀏覽器字首，如果不加這個引數，有可能將會刪除你的部分字首
}))// 開啟css壓縮
.pipe(rename(
// {
// dirname: "css",// 生成到對應目錄下，可以修改上級目錄名字，但是所有隻能生成到一個資料夾
// basename: "aloha",// 檔名字
// prefix: "bonjour-",// 檔案字首
// suffix: ".min",// 檔案字尾
// extname: ".css"// 檔案型別
// }
function (path) {
// path.dirname += "/css";// 生成到對應目錄下，可以修改上級目錄名字，但是所有隻能生成到一個資料夾
// path.basename += "-goodbye";// 檔名字
// path.extname = ".md";// 檔案型別
// 字首字尾不生效
path.dirname = path.dirname.replace(`less`, `css`);// 修改上級目錄，可生成到對應目錄
}
))// 改名字
.pipe(sourcemaps.write(`./map`))// 生成記錄位置資訊的sourcemaps檔案，為空時即為解析目錄下
.pipe(gulp.dest(DIST))// 編譯出口，可生成目錄或為存在目錄
.pipe(reload({stream: true}));
});
// js操作
gulp.task(`js`, (cb)=> {
// pump是一個小節點模組，將流連線在一起，如果其中一個關閉，則會將它們全部破壞
// 當dest發出關閉或錯誤時，使用標準source.pipe（dest）事件源將不會被銷燬。
// 您還不能提供回撥來告訴管道何時完成。
pump([
gulp.src([JS_SRC]),// JS編譯入口
sourcemaps.init(),// 啟用sourcemaps功能
changed(DIST),// 只通過更改過的檔案
babel({
presets: [`env`]// 編譯成es5
}),
uglify(),// 開啟壓縮功能
concat({
path:`js/all.js`
}),// 開啟js合併功能
rename({suffix: `.min`}),// 改名字中間加‘.min’
sourcemaps.write(`./map`),// 生成記錄位置資訊的sourcemaps檔案，為空時即為解析目錄下
gulp.dest(DIST),// 編譯出口，可生成目錄或為存在目錄
reload({stream: true})
],cb// 函式有引數
)
});
// 圖片壓縮（由於可能過多圖片，不建議每次更新操作）
// cmd命令：gulp images
gulp.task(`images`, ()=> {
gulp.src([IMG_SRC])// JS編譯入口
.pipe(changed(DIST))// 只通過更改過的檔案
.pipe(imagemin(
{
optimizationLevel: 5, //型別：Number 預設：3 取值範圍：0-7（優化等級）
progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
multipass: true, //型別：Boolean 預設：false 多次優化svg直到完全優化
svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
use: [pngquant()] // 使用pngquant外掛進行深度壓縮
}
))
.pipe(gulp.dest(DIST))// 編譯出口，可生成目錄或為存在目錄
}
)
// 靜態伺服器 + 監聽 less/js/html 檔案
gulp.task(`server`, ()=> {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 執行預設操作，順序執行另外的操作
gulp.task(`default`,[`server`],()=> {
// 執行操作
gulp.start([`less`,`js`]);
// 監聽改變
gulp.watch(LESS_SRC, [`less`]); // 監聽less的改變並執行對應操作
gulp.watch(JS_SRC, [`js`]); // 監聽js的改變並執行對應操作
gulp.watch(HTML, reload);
})附上對應的package.json。
{
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.23.6",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-changed": "^3.2.0",
"gulp-clean-css": "^3.9.3",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^4.1.0",
"gulp-less": "^4.0.0",
"gulp-uglify": "^3.0.0",
"imagemin-pngquant":"^5.1.0",
"pump": "^3.0.0"
}
}問題記錄
- gulp編譯less，dirname.replace資料夾為css資料夾後，對應字尾如何新增.min？(gulp-rename)