gulpfile.js

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开启任务
*/