寫在前面
個(gè)人學(xué)習(xí)記錄竹捉，配置有可能有打錯(cuò)的地方筷屡，還請(qǐng)不吝賜教涧偷。
安裝gulp
首先全局安裝：
$npm install gulp -g
在指定的目錄下安裝gulp并存為開發(fā)依賴
$npm install gulp --save-dev
插播一段說明：--save 與--save-dev
--save是存為運(yùn)行依賴（啟動(dòng)應(yīng)用所必須）
--save-dev是存為開發(fā)依賴（修改源碼所必須）
gulp初始化
在目錄中創(chuàng)建一個(gè)gulpfile.js的文件保存gulp的配置
配置說明：
var gulp=require('gulp') //獲取gulp模塊
gulp.task('default',function(){
//something
});
//配置默認(rèn)事件
有關(guān)gulp事件的說明
gulp.src('src/**/*.js')
//選擇當(dāng)前src目錄中（包括子文件夾）所有的js文件
（'src/*.js'）這種不包括子文件夾
.pipe(some require) //用某模塊來處理這些文件
.pipe(gulp.dest('publice/js'))//輸出處理后的文件
gulp.watch('src/*.js',['//some task'])//watch監(jiān)視指定目錄，若發(fā)生改變調(diào)用task 常用于自動(dòng)編譯或者刷新
gulp也可以配置異步調(diào)用毙死，或者聲明promise對(duì)象不過個(gè)人感覺一般用不到燎潮，如有需求可以查看文檔：gulp中文api
gulp配置示例
首先是一個(gè)也許會(huì)常用的基于gulp的插件名稱和說明
- 自動(dòng)加上 css3 前綴LessPluginAutoPrefix = require("less-plugin-autoprefix")
應(yīng)該有g(shù)ulp 版本 - Browsersync 同時(shí)進(jìn)行瀏覽器顯示效果的測試工具
- gulp-concat js文件拼接 npm install gulp-concat --save-dev
- gulp-uglify js文件壓縮 npm install gulp-uglify --save-dev
- gulp-clean-css css文件壓縮 npm install gulp-clean-css --save-dev
- gulp-changed 只編譯修過過的文件 npm install gulp-changed --save-dev
- gulp-babel es6轉(zhuǎn)es5 react jsx 轉(zhuǎn)換 npm install gulp-babel babel-preset-es2015 --save-dev
- gulp-plumber 錯(cuò)誤詳細(xì)信息 npm install gulp-plumber --save-dev
- gulp-util 雜用組件庫 npm install gulp-util --save-dev
- gulp-sourcemaps 生成依賴地圖 用來編譯復(fù)雜的相互引用的less(比如bootstrap)，js(比如各種node模塊)等文件) npm install gulp-sourcemaps --save-dev
配置Less編譯和壓縮
Less編譯
安裝 gulp-less
$ npm install gulp-less --save-dev
配置less自動(dòng)編譯
var gulp=require('gulp');
var less=require('gulp-less');
gulp.task('less',function(){
return gulp.src('less/*.less')
.pipe(less()) //READE.ME文件中有例子扼倘，但其中的依賴項(xiàng)我暫時(shí)不知道干嘛的
.pipe(gulp.dest('publice/css/'));
});
gulp.task('lessWatch',function(){
gulp.watch('less/*.less',['less']);// 當(dāng)less目錄下的文件發(fā)生變化時(shí)運(yùn)行l(wèi)ess編譯方法（注意不支持創(chuàng)建）
});
gulp.task('default',['lessWatch'])//默認(rèn)啟動(dòng)less監(jiān)視事件
以上就是最簡單的基于gulp-less的less自動(dòng)編譯配置
下面我們來看看編譯的同時(shí)壓縮
基于gulp-clean-css
安裝gulp-clean-css
$ npm install gulp-clean-css
在上面的配置文件基礎(chǔ)上加入gulp-clean-css
單獨(dú)使用可以參考READEME文檔
var gulp=require('gulp');
var less=require('gulp-less');
var cleanCSS=require('gulp-clean-css');
gulp.task('less',function(){
return gulp.src('Less/*.less')
.pipe(less()) //READE.ME文件中有例子跟啤，但其中的依賴項(xiàng)我暫時(shí)不知道干嘛的
.pipe(cleanCSS()) //添加這句話
.pipe(gulp.dest('Publice/css/'));
});
gulp.task('lessWatch',function(){
gulp.watch('Less/*.less',['less']);// 當(dāng)less目錄下的文件發(fā)生變化時(shí)運(yùn)行l(wèi)ess編譯方法（注意不支持創(chuàng)建）
});
gulp.task('default',['lessWatch'])//默認(rèn)啟動(dòng)less監(jiān)視事件
gulp基本配置如此
下面附上一個(gè)可以編譯復(fù)雜引用的less，同時(shí)報(bào)錯(cuò)可以輸出錯(cuò)誤信息的gulp配置示例
var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //需要先確保安裝gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //生成依賴地圖
var plumber = require('gulp-plumber'); //錯(cuò)誤管理
var gutil = require('gulp-util'); //實(shí)際的提醒
function errHandler( e ){
gutil.log(e.toString());
} //創(chuàng)建一個(gè)顯示錯(cuò)誤信息的函數(shù)
gulp.task('less', function() {
gulp.src('Less/*.less')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(plumber( {errorHandler: errHandler}))
.pipe(less())
.pipe(cleanCSS()) //鏈?zhǔn)讲僮?先編譯再壓縮
.pipe(sourcemaps.write('mpas'))
.pipe(gulp.dest('Publice/css'));
});
gulp.task('watch',function(){
gulp.watch('Less/*.less', ['less']);
});
gulp.task('default', ['watch']);
ES6轉(zhuǎn)ES5并壓縮混淆的配置
原理和邏輯與LESS并無太大不同
首先是安裝
$ npm install gulp-babel babel-preset-es2015 --save-dev
然后是配置
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps'); //生成依賴地圖
var plumber = require('gulp-plumber'); //錯(cuò)誤管理
var gutil = require('gulp-util'); //實(shí)際的提醒
var babel=require('gulp-babel'); //es6轉(zhuǎn)es5
var uglify = require('gulp-uglify'); //js壓縮
function errHandler( e ){
gutil.log(e.toString());
} //錯(cuò)誤提示函數(shù)
gulp.task('es5change',function(){
gulp.src('es6/*.js')
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(plumber({errorHandler:errHandler}))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('Publice/js'));
});
gulp.task('watch',function(){
gulp.watch('es6/*.js', ['es5change']);
});
gulp.task('default', ['watch']);
最后附上Less和ES6轉(zhuǎn)ES5的完整配置項(xiàng)
var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //需要先確保安裝gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //生成依賴地圖
var plumber = require('gulp-plumber'); //錯(cuò)誤管理
var gutil = require('gulp-util'); //實(shí)際的提醒
var babel=require('gulp-babel'); //es6轉(zhuǎn)es5
var uglify = require('gulp-uglify'); //js壓縮
function errHandler( e ){
gutil.log(e.toString());
}
gulp.task('es5change',function(){
gulp.src('es6/*.js')
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(plumber({errorHandler:errHandler}))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('Publice/js'));
});
gulp.task('less', function() {
"use strict";
gulp.src('Less/*.less')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(plumber( {errorHandler: errHandler}))
.pipe(less())
.pipe(cleanCSS()) //鏈?zhǔn)讲僮?先編譯再壓縮
.pipe(sourcemaps.write('mpas'))
.pipe(gulp.dest('Publice/css'));
});
gulp.task('watch',function(){
gulp.watch('Less/*.less', ['less']);
gulp.watch('es6/*.js', ['es5change']);
});
gulp.task('default', ['watch']);
