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)