推薦安裝軟件：node,webstorm
通過npm安裝gulp
初始化npm撬腾，生成package.json:npm init
可以選擇只安裝在項目中：npm install --save-dev gulp
也可以選擇全局安裝：npm install -g gulp
安裝相應(yīng)模塊:npm install m
gulpfile配置示例：
/**
* Created by WUQD on 2016/12/22.
*/
/**
*組件安裝
* npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
*/
//引入gulp及組件
vargulp=require('gulp'),//基礎(chǔ)庫
runsequence=require('run-sequence'),//順序執(zhí)行任務(wù),gulp默認(rèn)是異步的
sass=require('gulp-sass'),
minifycss=require('gulp-minify-css'),//css壓縮
jshint=require('gulp-jshint'),//js檢查
uglify=require('gulp-uglify'),//js壓縮
ngmin=require('gulp-ngmin'),//Angularjs項目壓縮
ngannotate=require('gulp-ng-annotate'),
htmlmin=require('gulp-htmlmin'),//html壓縮
rename=require('gulp-rename'),//重命名
concat? =require('gulp-concat'),//合并文件
clean =require('gulp-clean'),//清空文件夾
tinylr=require('tiny-lr'),//livereload,自動刷新頁面
flatten=require('gulp-flatten'),//拷貝文件不拷貝目錄
wiredep =require('wiredep').stream,//動態(tài)引入bower
rev=require('gulp-rev'),//-對文件名加MD5后綴
revcollector=require('gulp-rev-collector'),//-路徑替換
replace=require('gulp-replace'),//文本替換
server =tinylr(),
port =35729,
livereload=require('gulp-livereload'),//實時保存刷新
tar=require('gulp-tar'),
gzip =require('gulp-gzip'),//壓縮,打包
ftpdeploy =require('ftp-deploy'),//上傳ftp
del =require('del'),//刪除文件
combiner=require("stream-combiner2");//stream
// HTML處理
gulp.task('html',function() {
varoptions = {
removeComments:true,//清除HTML注釋
collapseWhitespace:true,//壓縮HTML
collapseBooleanAttributes:true,//省略布爾屬性的值
removeEmptyAttributes:true,//刪除所有空格作屬性值
removeScriptTypeAttributes:true,//刪除的type="text/javascript"
removeStyleLinkTypeAttributes:true,//刪除和的type="text/css"
minifyJS:true,//壓縮頁面JS
minifyCSS:true//壓縮頁面CSS
};
gulp.src('./src/views/**/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('./dist/views'));
});
//樣式處理
gulp.task('css',function() {
varcssSrc ='./src/contents/**/*.css',
cssDst ='./dist/contents';
gulp.src(cssSrc)//壓縮的文件
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())//執(zhí)行壓縮
.pipe(livereload(server))
.pipe(gulp.dest(cssDst))//輸出文件夾
});
//編譯sass
gulp.task('sass',function(){
varsassSrc ='./src/contents/**/*.scss',
sassDst ='./src/contents/';
returngulp.src(sassSrc)
.pipe(sass().on('error',sass.logError) )
.pipe( gulp.dest(sassDst));
});
//合并js
gulp.task('scripts',function() {
varbase ='./src/scripts/lib/';
varjsSrc = [base+'jquery-1.11.3.min.js',
base+'json2.js',
base+'common.js',
base+'jadann.db.manage.js',
base+'user.db.js',
base+'jadann.promptbox.js'
];
returngulp.src(jsSrc)
.pipe(concat('jadann.js'))
.pipe(gulp.dest('./dist/scripts/lib/'));
});
// js處理
gulp.task('js',function() {
varjsSrc ='./src/scripts/*.js',
jsDst ='./dist/scripts';
varcombined =combiner.obj([
gulp.src(jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(ngannotate())
.pipe(ngmin({dynamic:false}))
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
// .pipe(livereload(server))
.pipe(gulp.dest(jsDst))
]);
//任何在上面的stream中發(fā)生的錯誤，都不會拋出漓踢，
//而是會被監(jiān)聽器捕獲
combined.on('error',console.error.bind(console));
returncombined;
});
// jslib處理:將bower_components目錄下文件拷貝到src/js/lib下
gulp.task('bowerjslib',function() {
gulp.src('bower_components/**/*.min.js')
.pipe(flatten())
.pipe(gulp.dest('./src/scripts/lib'));
});
// jslib處理:將src/js/lib目錄下文件拷貝到dist/js/lib下
gulp.task('jslib',function() {
gulp.src('./src/scripts/lib/**/*.min.js')
.pipe(flatten())
.pipe(gulp.dest('./dist/scripts/lib'));
});
//清空dist
gulp.task('clean',function() {
returngulp.src('./dist')
.pipe(clean({force:true}));
});
//備份build目錄下的舊版本打包文件
gulp.task('clean:build',function() {
//備份舊文件
gulp.src('build/*.tar.gz')
.pipe(rename(function(path) {
console.log(path);
path.extname+=".old";
}))
.pipe(gulp.dest('build/old'))
del(['build/*.tar.gz','!build/old/*'])
});
//gizp壓縮待發(fā)布文件
gulp.task('tar',function() {
vardate =newDate().getTime();
gulp.src('dist/**/*')
.pipe(tar('web_app_build_'+ date +".tar"))
.pipe(gzip())
.pipe(gulp.dest('build'))
});
//上傳壓縮包至ftp
gulp.task('ftp:deploy',function() {
varftpDeploy =newftpdeploy();
varconfig = {
username:"open",
password:"open123",// optional, prompted if none given
host:"172.0.0.1",
port:20,
localRoot:"build/",
remoteRoot:"/dist/",
exclude: ['*.old']
}
ftpDeploy.deploy(config,function(err) {
if(err) console.log(err)
elseconsole.log('finished');
})
});
//發(fā)布測試
gulp.task('dist:test',function() {
varftpDeploy =newftpdeploy();
varconfig = {
username:"open",
password:"open123",// optional, prompted if none given
host:"172.0.0.1",
port:20,
localRoot:"dist",
remoteRoot:"/product/appdownload",
exclude: ['*.old']
}
ftpDeploy.deploy(config,function(err) {
if(err) console.log(err)
elseconsole.log('finished');
})
});
//自動引入bower導(dǎo)入的庫
gulp.task('bower',function() {
gulp.src('./src/index.html')
.pipe(wiredep({
optional:'configuration',
goes:'here'
}))
.pipe(gulp.dest('./src'));
});
//修改引入的文件
gulp.task("replace",function() {
vardate =newDate().getTime();
console.log(date);
gulp.src('./dist/index.html')
.pipe(replace('.css','.min.css'))
.pipe(replace('.js','.min.js'))
.pipe(gulp.dest('./dist/'))
});
//監(jiān)聽任務(wù) 運行語句gulp watch
gulp.task('watch',function(){
server.listen(port,function(err){
if(err) {
returnconsole.log(err);
}
//監(jiān)聽scss
gulp.watch('./src/contents/**/*.scss',['sass']);
//監(jiān)聽css
gulp.watch('./src/css/*.css',function(){
gulp.run('css');
});
//監(jiān)聽js
gulp.watch('./src/scripts/**/*.js',function(){
gulp.run('js');
});
gulp.watch('./src/scripts/lib/**/*.js',['scripts','jslib']);
//監(jiān)聽bowerjslib
gulp.watch('bower_components/**/*.min.js',function(){
gulp.run('bowerjslib');
});
//監(jiān)聽html
gulp.watch('./src/**/*.html',function(event){
gulp.run('html');
})
});
});
//整合streams來處理錯誤
//默認(rèn)任務(wù) 清空圖片、樣式挺据、js并重建 運行語句gulp
gulp.task('default',['clean'],function(){
gulp.start('bowerjslib','js','jslib','scripts','sass','css','html','watch');
});
gulp.task('build',function(callback) {
runsequence('clean','bowerjslib','js','jslib','scripts','sass','css','html','watch');
});
gulp.task('build:nowatch',function(callback) {
runsequence('clean','bowerjslib','js','jslib','scripts','css','html');
});
