1、最后运行的时候,cmd中输入gulp就能打包以及开服务器了
2、如果要执行js文件,需要下载gulp-cli;Npm i gulp-cli;
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
// webpack = require('webpack'),
//named = require('vinyl-named'),
concat = require('gulp-concat'),
cssnano = require('gulp-cssnano'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
clean = require('gulp-clean'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload;
//创建任务
//clean掉之前打包好的dist文件,避免缓存
gulp.task('clean',function(){
return gulp.src('./dist',{read:false})
.pipe(clean({force:true}));
});
//js
var jsFiles = [
'static/js/car/*.js',
'static/js/common/*.js',
'static/js/home/*.js',
];
var js = [
'static/js/jquery/dist/jquery.min.js',
'static/js/jquery-validation/dist/jquery.validate.min.js',
'static/js/layer/layer/layer.js',
'static/js/require/require(1).js',
'static/js/laydate-master/laydate.js',
]
gulp.task('jsmin',function(){
gulp
.src(jsFiles)
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(reload({stream:true}))
});
gulp.task('js',function(){ //将lib的js文件拷贝到dist目录
gulp
.src(js)
.pipe(gulp.dest("dist/lib"))
.pipe(reload({stream:true}))
});
//用webpack打包js,需要用到gulp-webpack;
// gulp.task('jsmin',function(){
// gulp
// .src(jsFiles)
// .pipe(named())
// .pipe(gulpWebpack())
// .pipe(uglify())
// .pipe(gulp.dest('dist/js'))
// .pipe(reload({stream:true}))
// });
//css
gulp.task('cssmin',function(){
gulp
.src('static/css/*/*.css')
.pipe(concat('all.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(reload({stream:true}))
});
gulp.task('md5:css',['cssmin'],function(){
gulp
.src('dist/css/*.css')
.pipe(md5(10,'dist/pages/*.html'))
.pipe(gulp.dest('dist/css'))
.pipe(reload({stream:true}))
})
//html
gulp.task('htmlmin',function(){
gulp
.src(['index.html','pages/car/*.html','pages/home/*.html','pages/public/*.html'])
.pipe(htmlmin({
collapseWhitespace:true,
minifyCss:true,
minifyJs:true,
removeComments:true
}))
.pipe(gulp.dest('dist/pages'))
.pipe(reload({stream:true}))
});
//image
gulp.task('img',function () {
gulp
.src('static/images/*.*')
.pipe(imagemin({
progressive: true,//无损压缩jpg图片
interlaced: true,//隔行扫描gif进行渲染
multipass:true,//多次优化svg直到完全优化
use: [pngquant()]//压缩png图片
}))
.pipe(gulp.dest('dist/images'))
.pipe(reload({stream:true}));
});
//创建默认任务
gulp.task('default',[/*'jsmin',*/'js','cssmin','htmlmin','img'],function () {
browserSync.init({
server:{
//将dist目录作为根目录
baseDir:"./"
}
});
gulp.watch(['static/js/*/*.js','static/css/*/*.css','index.html','pages/car/*.html','pages/home/*.html','pages/public/*.html','static/images/*.*'],[/*'jsmin',*/'js','cssmin','htmlmin','img']).on('change',reload);
})