創(chuàng)建gulp
基于npm的基礎(chǔ)使用gulp良瞧，需先更新npm
npm install -g npm
全局安裝gulp
npm install -g gulp
檢查版本
gulp -v
一.建立站點(diǎn)
站點(diǎn)目錄
項(xiàng)目開發(fā)中分兩個(gè)環(huán)境:
build為生產(chǎn)環(huán)境
src為開發(fā)環(huán)境
兩個(gè)環(huán)境要隔離開來
二.初始化建立pageage.json
npm init -y
一路yes
三.要在本地安裝gulp 作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝
npm install --save-dev gulp
node_modules.png
四.在根目錄建立一個(gè)gulpfile.js 用來做你想做的事情
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認(rèn)的任務(wù)代碼放在這
});
方法羅列.png
開發(fā)版本分離模式.png
刪除文件 禁用 一旦刪除無法恢復(fù)
var del=require('del');
gulp.task('del',function(){
del([
'./src/css',
'./src/'
])
})
gulp自動(dòng)化最佳實(shí)戰(zhàn)
1.md5命名文件的方式
var gulp = require('gulp');
var less = require('gulp-less');
var concat = require('gulp-concat');
var cleanCss =require('gulp-clean-css');
var del=require('del');
var babel=require('gulp-babel');
var uglify = require('gulp-uglify');
var rename =require('gulp-rename');
var imagemin =require('gulp-imagemin');
var spriter = require('gulp-css-spriter');
var base64 = require('gulp-base64');
var browserSync = require('browser-sync').create();
var reload=browserSync.reload;
var rev=require('gulp-rev');//給文件名添加md5后綴
var revCollector=require('gulp-rev-collector'); //路徑替換
var runSequence=require('run-sequence');
//var notify=require('gulp-notify');
var build={
basePath:'./build/',
css:'./build/css',
images:'./build/images/',
js:'./build/js/'
};
var src={
basePath:'./src/',
css:'./src/css/',
images:'./src/images/',
js:'./src/js/',
less:'./src/less/'
};
/************************開發(fā)模式*****************************/
//服務(wù)器實(shí)時(shí)預(yù)覽刷新
gulp.task('server:dev',function(){
browserSync.init({
server:{
baseDir:src.basePath,
index:'index.html'
},
port:80
});
gulp.watch('src/*.html',['html:dev']);
gulp.watch('src/less/*.less',['less']);
gulp.watch('src/css/*.css',['css:dev']);
gulp.watch('src/js/*.js',['js:dev']);
runSequence(['less'],['css:dev','js:dev']);
});
gulp.task('html:dev',function(){
gulp.src(['./src/*.html'])
.pipe(gulp.dest(src.basePath))
.pipe(reload({stream:true}))
});
gulp.task('less',function(){
gulp.src(src.less+'*.less')
.pipe(less())
.pipe(gulp.dest(src.css))
.pipe(reload({stream:true}))
});
gulp.task('css:dev',function(){
gulp.src([src.css+'*.css','!'+src.css+'all.min.css','!'+src.css+'all.css'])
.pipe(concat('all.css'))
.pipe(spriter({
'spriteSheet': src.images+'spritesheet.png',
'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
}))
.pipe(base64())
.pipe(gulp.dest(src.css))
.pipe(cleanCss())
.pipe(rename('all.min.css'))
.pipe(gulp.dest(src.css))
.pipe(reload({stream:true}))
});
gulp.task('js:dev',function(){
gulp.src([src.js+'*.js','!'+src.js+'all.js','!'+'src.js'+'all.min.js'])
.pipe(babel({
presets:['es2015']
}))
.pipe(concat('all.js'))
.pipe(gulp.dest(src.js))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest(src.js))
.pipe(reload({stream:true}))
});
/************************生成模式***************************/
gulp.task('server:product',function(){
runSequence(['imagesmin','publish:html','publish:css','publish:js'],'rev');
browserSync.init({
server:{
baseDir:build.basePath,
index:'index.html'
},
port:81
});
});
gulp.task('imagesmin',function(){
gulp.src(src.images+'*.*')
.pipe(imagemin())
.pipe(gulp.dest(build.images))
});
gulp.task('publish:html',function(){
gulp.src(src.basePath+'*.html')
.pipe(gulp.dest(build.basePath))
});
gulp.task('publish:css',function(){
gulp.src(src.css+'all.min.css')
.pipe(rev())//發(fā)布新版本
.pipe(gulp.dest(build.css))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css/'))
});
gulp.task('publish:js',function(){
gulp.src(src.js+'all.min.js')
.pipe(rev())
.pipe(gulp.dest(build.js))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/js/'))
});
gulp.task('del:build',function(){
del([
build.basePath
])
});
gulp.task('rev',function(){
return gulp.src(['./rev/**/*.json',build.basePath+'*.html'])
.pipe(revCollector({}))
.pipe(gulp.dest(build.basePath));
});
2.使用版本號(hào)參數(shù)的方式 要在HTML路徑后加 ?rev=@@hash
var gulp = require('gulp');
var less = require('gulp-less');
var concat = require('gulp-concat');
var cleanCss =require('gulp-clean-css');
var del=require('del');
var babel=require('gulp-babel');
var uglify = require('gulp-uglify');
var rename =require('gulp-rename');
var imagemin =require('gulp-imagemin');
var spriter = require('gulp-css-spriter');
var base64 = require('gulp-base64');
var browserSync = require('browser-sync').create();
var reload=browserSync.reload;
var rev = require('gulp-rev-append');//給URL自動(dòng)加上版本號(hào)
var runSequence=require('run-sequence');
var build={
basePath:'./build/',
css:'./build/css',
images:'./build/images/',
js:'./build/js/'
};
var src={
basePath:'./src/',
css:'./src/css/',
images:'./src/images/',
js:'./src/js/',
less:'./src/less/'
};
/************************開發(fā)模式*****************************/
//服務(wù)器實(shí)時(shí)預(yù)覽刷新
gulp.task('server:dev',function(){
browserSync.init({
server:{
baseDir:src.basePath,
index:'index.html'
},
port:80
});
gulp.watch('src/*.html',['html:dev']);
gulp.watch('src/less/*.less',['less']);
gulp.watch('src/css/*.css',['css:dev']);
gulp.watch('src/js/*.js',['js:dev']);
runSequence(['less'],['css:dev','js:dev']);
});
gulp.task('html:dev',function(){
gulp.src(['./src/*.html'])
.pipe(gulp.dest(src.basePath))
.pipe(reload({stream:true}))
});
gulp.task('less',function(){
gulp.src(src.less+'*.less')
.pipe(less())
.pipe(gulp.dest(src.css))
.pipe(reload({stream:true}))
});
gulp.task('css:dev',function(){
gulp.src([src.css+'*.css','!'+src.css+'all.min.css','!'+src.css+'all.css'])
.pipe(concat('all.css'))
.pipe(spriter({
'spriteSheet': src.images+'spritesheet.png',
'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
}))
.pipe(base64())
.pipe(gulp.dest(src.css))
.pipe(cleanCss())
.pipe(rename('all.min.css'))
.pipe(gulp.dest(src.css))
.pipe(reload({stream:true}))
});
gulp.task('js:dev',function(){
gulp.src([src.js+'*.js','!'+src.js+'all.js','!'+'src.js'+'all.min.js'])
.pipe(babel({
presets:['es2015']
}))
.pipe(concat('all.js'))
.pipe(gulp.dest(src.js))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest(src.js))
.pipe(reload({stream:true}))
});
/************************生成模式***************************/
gulp.task('server:product',function(){
runSequence(['imagesmin','publish:html','publish:css','publish:js'],'rev');
browserSync.init({
server:{
baseDir:build.basePath,
index:'index.html'
},
port:81
});
});
gulp.task('imagesmin',function(){
gulp.src(src.images+'*.*')
.pipe(imagemin())
.pipe(gulp.dest(build.images))
});
gulp.task('publish:html',function(){
gulp.src(src.basePath+'*.html')
.pipe(gulp.dest(build.basePath))
});
gulp.task('publish:css',function(){
gulp.src(src.css+'all.min.css')
.pipe(rev())//發(fā)布新版本
.pipe(gulp.dest(build.css))
});
gulp.task('publish:js',function(){
gulp.src(src.js+'all.min.js')
.pipe(rev())
.pipe(gulp.dest(build.js))
});
gulp.task('del:build',function(){
del([
build.basePath
])
});
gulp.task('rev',function(){
return gulp.src(['./rev/**/*.json',build.basePath+'*.html'])
.pipe(rev())
.pipe(gulp.dest(build.basePath));
});
