var gulp = require("gulp")
var less = require('gulp-less')
var useref = require('gulp-useref')
var browserSync = require("browser-sync")
var uglify = require("gulp-uglify")
var minifyCss = require('gulp-minify-css')
var gulpIf = require('gulp-if')
var imagemin = require('gulp-imagemin')
var cache = require('gulp-cache')
var del = require("del")
var runSequence = require("run-sequence")
var autoprefixer= require('gulp-autoprefixer')
gulp.task("less", function () {
return gulp.src('app/less/**/*.less')
.pipe(less())
.pipe(gulp.dest('./app/css'))
})
/*
*.less匹配当前目录下所有less文件
** /*.less匹配当前及子目录下所有less文件
*.+(sass|scss)匹配sass或scss结尾文件
*/
gulp.task("watch", function () {
gulp.watch('app/less/**/*.less', ['less'])
})
/*
监听指定目录下文件变化,并执行相应任务
*/
gulp.task("browserSync", function () {
browserSync({
server: {
baseDir: 'app'
}
})
})
/*
开启本地服务器,实时刷新页面
*/
gulp.task("syncLess", function () {
return gulp.src("app/less/**/*.less")
.pipe(less())
.pipe(gulp.dest('./app/css'))
.pipe(browserSync.reload({ //每次编译css后调用刷新服务器任务
stream: true
}))
})
gulp.task('watchSync', ['browserSync', 'syncLess'], function () { //监听之前先执行中括号中任务
gulp.watch('app/less/**/*.less', ['syncLess'])
})
/*
开启本地服务->监听文件变化->less编译->浏览器刷新
*/
gulp.task('wathcAll', ['browserSync', 'syncLess'], function () {
gulp.watch('app/less/**/*.less', ['syncLess']);
gulp.watch('app/html/**/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
/*
可监听所有文件变化
*/
gulp.task('useref', function () {
return gulp.src('app/**/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'))
})
/*
js文件合并
<!--build:js js/min.js-->
<!--endbuild-->
这两个注释之间的js文件都会合并为min.js
*/
gulp.task('uglify', function () {
return gulp.src('app/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
})
/*
js压缩
*/
gulp.task('autoprefixer',function(){
return gulp.src("app/css/**/*.css")
.pipe(autoprefixer({
borwser:['>5%', 'Android >= 4.0'],
cascade: true,
remove:true
}))
.pipe(gulp.dest('dist'))
})
/*
自动添加前缀
browser:浏览器版本,超过5%使用率的浏览器
cascade:美化css
remove:去除无用前缀
*/
gulp.task('minifyCss', function () {
return gulp.src('app/**/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist'))
})
/*
css压缩
*/
gulp.task('imagemin', function () {
return gulp.src('app/images/**/*.+(gif|png|jpg|jpeg|svg|webp)')
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist'))
})
/*
加入gulp缓存可加快压缩速度
*/
gulp.task('clean', function () {
del('dist')
})
/*
gulp的删除文件方式
*/
gulp.task('clean1:dist',function(){
del(['dist/**/*','!dist/images','!dist/images/**/*'])
})
/*
删除除images文件下所有文件
*/
gulp.task('build',function(){
runSequence('clean',['less','useref','imagemin','uglify','minifyCss'])
})
/*
中括号包裹的任务同时执行,runSequence中按顺序执行
*/
gulp.task('default',function(){
runSequence(['less','watchAll'])
})
/*
任务名为default可直接使用gulp开启任务
*/