原文地址：https://yawuling.com/201706251602.html
Gulp.js 是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動執(zhí)行常見任務(wù)大刊。在這里介紹了gulp的入門跑杭，插件和gulpfile.js配置文件肛宋。
入門
-
全局安裝
gulp$ npm install -g gulp -
新建一個文件夾作為項(xiàng)目塌计，進(jìn)入該文件夾，初始化
$ mkdir example $ npm init -
安裝開發(fā)依賴（
devDependences）$ npm install --save-dev gulp -
在項(xiàng)目根目錄新建
gulpfile.js文件$ touch gulpfile.js -
編輯
gulpfile.js文件var gulp = require('gulp'); gulp.task('default', function () { //默認(rèn)任務(wù)代碼 }); 命令行運(yùn)行g(shù)ulp蜈项，即可運(yùn)行默認(rèn)任務(wù)
$ gulp
api介紹
這里只列出api常用用法给僵，了解更多請查閱官網(wǎng)http://www.gulpjs.com.cn/docs/api/
-
gulp.src(globs[, options])
輸出符合匹配的文件并返回一個
stream滓玖，可pipe到其他插件-
golbs(類型：
String或Array)String: 'src/js/*.js'
Array: ['src/js/*.js', 'src/css/*.css']
-
-
gulp.dest(path[, options])
將
pipe進(jìn)來的數(shù)據(jù)轉(zhuǎn)存為指定文件夾下的文件，若指定文件夾不存在叹阔，則自動創(chuàng)建該文件夾-
path(類型：
String或Function)String: 'dist/js'
Function: 在函數(shù)中返回相應(yīng)路徑
-
-
gulp.task(name[, deps], fn)
定義一個任務(wù)
gulp.task('something', functio () { doSomething(); });-
name(類型：
String)任務(wù)的名字挠轴，可在命令行中通過
name運(yùn)行任務(wù)，$ gulp name -
deps(類型：Array)
一個包含任務(wù)列表的數(shù)組耳幢，這些任務(wù)會在當(dāng)前任務(wù)運(yùn)行之前完成
-
fn(類型：
Function)該任務(wù)要執(zhí)行的內(nèi)容
-
-
gulp.watch(glob[, opts], tasks) 或 gulp.watch(globs[, opts, cb])
文件監(jiān)視岸晦，當(dāng)指定匹配文件發(fā)生變化時，執(zhí)行tasks或函數(shù)cb
glob(類型：
String或Array)-
tasks(類型：
String或Array)文件變動后執(zhí)行之前定義好的任務(wù)
-
cb(類型：
Function)傳入一個記錄文件變動的
event對象，event.type記錄變動類型：added,changed,deleted启上；event.path記錄變動文件的路徑
gulp插件介紹
-
gulp-less/gulp-sass
預(yù)編譯less/sass文件為css文件
安裝：
$ npm install --save-dev gulp-less -
gulp-autoprefixer
設(shè)置瀏覽器版本邢隧，css文件自動添加瀏覽器前綴
安裝：
$ npm install --save-dev gulp-autoprefixer -
gulp-minify-css
壓縮css文件
安裝：
$ npm install --save-dev gulp-minify-css -
gulp-rename
重命名要輸出的文件，如將.css重命名為.min.css
安裝：
$ npm install --save-dev gulp-rename -
vinyl-buffer
將vinyl對象內(nèi)容中的stream轉(zhuǎn)換為buffer
安裝：
$ npm install --save-dev vinyl-buffer -
vinyl-source-stream
將Browserify的bundle()的輸出轉(zhuǎn)換為Gulp可用的vinyl流
安裝：
$ npm install --save-dev vinyl-source-stream -
gulp-sourcemaps
編寫內(nèi)聯(lián)sourcemaps
安裝：
$ npm install --save-dev gulp-sourcemaps -
browserify
可以讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼冈在，在這里用來管理依賴
安裝：
$ npm install --save-dev browserify -
babelify
將ES6轉(zhuǎn)換成ES5
安裝：
$ npm install --save-dev babelify -
gulp-uglify
壓縮 JavaScript 文件
安裝：
$ npm install --save-dev gulp-uglify -
gulp-imagemin
壓縮 png倒慧，jpeg，gif和svg圖片資源
安裝：
$ npm install --save-dev gulp-imagemin -
gulp-cache
圖片緩存，只有圖片替換了才壓縮
安裝：
$ npm install --save-dev gulp-cache -
gulp-clean
移除文件或文件夾
安裝：
$ npm install --save-dev gulp-clean -
gulp-util
包含gulp的一些實(shí)用功能心剥，在這里用來打印編譯錯誤
安裝：
$ npm install --save-dev gulp-util -
gulp-notify
當(dāng)文件變更時提醒
安裝：
$ npm install gulp-notify -
gulp-connect
gulp中用來運(yùn)行服務(wù)器的插件拇泛，內(nèi)含LiveReload，自動刷新瀏覽器
安裝：
$ npm install --save-dev gulp-connect
gulpfile.js文件配置
- 內(nèi)含 ES6 轉(zhuǎn) ES5
var gulp = require('gulp'),
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
cache = require('gulp-cache'),
notify = require('gulp-notify'),
browserify = require('browserify'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
source = require('vinyl-source-stream'),
sourcemaps = require('gulp-sourcemaps'),
gutil = require('gulp-util'),
connect = require('gulp-connect');
/*
* styles任務(wù)系宜，將'src/less'目錄下的less文件轉(zhuǎn)換成css文件，
* 并加上瀏覽器前綴发魄，存放于'dist/css'目錄下盹牧，之后重命名加上.min，壓縮励幼，
* 保存為.min.css文件汰寓，之后刷新瀏覽器，并提醒style任務(wù)完成
*/
gulp.task('styles', function() {
return gulp.src('src/less/*.less')
.pipe(less())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.on('error', gutil.log)
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.init())
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload())
.pipe(notify({message: 'style task complete'});
});
/*
* scripts任務(wù)苹粟，通過browserify設(shè)置入口文件有滑，然后用babelify將
* es6轉(zhuǎn)換成es5，保存在'dist/js'目錄下嵌削，之后壓縮js文件毛好，重命名
* 保存為.min.js文件
*/
gulp.task('scripts', function() {
var b = browserify({
entries: 'src/js/cart.js',
debug: true
});
return b.transform(babelify.configure({
presets: ["es2015"]
}))
.bundle()
.on('error', gutil.log)
.pipe(source('cart.js'))
.pipe(gulp.dest('dist/js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
/*
* images任務(wù)，讀取'src/img'目錄下的圖片苛秕，壓縮并保存到'dist/img'目錄下
*/
gulp.task('images', function() {
return gulp.src('src/img/*')
.pipe(cache(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})])))
.on('error', gutil.log)
.pipe(gulp.dest('dist/img'))
.pipe(connect.reload());
});
/*
* html任務(wù)肌访，讀取'src'目錄下的html文件，并保存到'dist'目錄下
*/
gulp.task('html', function() {
return gulp.src('src/shangcheng/*.html')
.pipe(gulp.dest('dist/'))
.pipe(connect.reload());
});
/*
* connect任務(wù)艇劫，運(yùn)行服務(wù)器并自動刷新瀏覽器
*/
gulp.task('connect', function() {
connect.server({
livereload: true
});
});
/*
* clean任務(wù)吼驶，將dist目錄下的css文件，js文件店煞，圖片文件和html文件清除
*/
gulp.task('clean', function() {
return gulp.src(['dist/css', 'dist/js', 'dist/img', 'dist/*.html'], {read: false})
.pipe(clean());
});
/*
* 默認(rèn)任務(wù)蟹演，在開始執(zhí)行styles任務(wù)，scripts任務(wù)浅缸，images任務(wù)轨帜，html任務(wù)之前先執(zhí)行clean任務(wù)
*/
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images', 'html');
});
/*
* 監(jiān)視任務(wù)，監(jiān)聽less文件衩椒，js文件蚌父，圖片文件和html文件的變更
*/
gulp.task('watch', function() {
//監(jiān)聽所有.less
gulp.watch('src/less/*.less', ['styles']);
//監(jiān)聽所有.js文件
gulp.watch('src/js/*.js', ['scripts']);
//監(jiān)聽所有圖片文件
gulp.watch('src/img/*', ['images']);
//監(jiān)聽html文件
gulp.watch('src/*.html', ['html']);
});
/*
* server任務(wù)哮兰，執(zhí)行connect任務(wù)和watch任務(wù)
*/
gulp.task('server', ['connect', 'watch']);
- 不含 ES6 的 js 文件任務(wù)
gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.on('error', gutil.log)
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
