gulp简单总结

下面笔记来自：https://www.cnblogs.com/sxz2008/p/6370221.html

拓展知识在下面，后续接触或使用越多，拓展越多。。。

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');

gulp.task('task01',function(){
    console.log('task01 success!');
});
gulp.task('task02',function(){
    return gulp.src('app/scss/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
});
gulp.task('task03', function() {
    return gulp.src('app/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
});
gulp.task('task04', function(){
  gulp.watch('app/scss/**/*.scss', ['task03']);
});

gulp.task('task05',function(){
    browserSync({
        server:{
            baseDir:'app'
        }
    })
});
gulp.task('task06',function(){
    return gulp.src('app/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
});
gulp.task('task07',['task05','task06'],function(){
    gulp.watch('app/scss/**/*.scss', ['task06']);
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

gulp.task('task08',function(){
    return gulp.src('app/*.html')
        .pipe(gulpIf('*.css',minifyCSS()))
        .pipe(gulpIf('*.js',uglify()))
        .pipe(useref())
        .pipe(gulp.dest('dist'))
});

gulp.task('task09',function(){
    return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
});
gulp.task('task10',function(){
    return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'))
});

gulp.task('task11',function(){
    del('dist');
});
gulp.task('task12:dist',function(callback){
    del(['dist/**/*','!dist/images','!dist/images/**/*'],callback);
});
gulp.task('task13',function(callback){
    del('dist');
    return cache.clearAll(callback);
});

// 第一条是开发过程，我们便以Sass，监听文件，刷新浏览器。
gulp.task('watch', ['browserSync', 'sass'], function (){
  // ... watchers
})
// 第二条是优化，我们优化CSS,JavaScript,压缩图片，并把资源从app移动到dist。
gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
  console.log('Building files');
})

// gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
//   console.log('Building files');
// })

gulp.task('task-name', function(callback) {
    runSequence('task-one', 'task-two', 'task-three', callback);
});

gulp.task('task-name', function(callback) {
    runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});

gulp.task('build', function (callback) {
    runSequence('clean:dist',['sass', 'useref', 'images', 'fonts'],callback);
})

gulp.task('default', function (callback) {
    runSequence(['sass','browserSync','watch'],callback);
})

拓展一：https://blog.csdn.net/hsl0530hsl/article/details/78366775?locationNum=2&fps=1

gulp-load-plugins这个插件能自动帮你加载package.json文件里的 gulp 插件