javascript - Gulp 构建任务

Question

我应该如何在我的 gulpfile.js 中形成我的 'build' 任务？现在我只为所有当前任务设置了一个 runSequence，目标是 src 文件夹而不是分发。

我应该编写次要任务，例如 sass-dist 、 'js-dist' 等吗？

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    plumber = require('gulp-plumber'),
    gutil = require('gulp-util'),
    pug = require('gulp-pug'),
    browserSync = require('browser-sync').create(),
    useref = require('gulp-useref'),
    uglify = require('gulp-uglify'),
    gulpIf = require('gulp-if'),
    cssnano = require('gulp-cssnano'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    del = require('del'),
    runSequence = require('run-sequence');

function handleError(err) {
    gutil.beep();
    console.log(err.toString());
    this.emit('end');
}

gulp.task('sass', function () {
    return gulp.src('src/scss/**/*.scss')
        .pipe(plumber({
            errorHandler: handleError
        }))
        .pipe(sass()) // Using gulp-sass
        .pipe(gulp.dest('src/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('views', function buildHTML() {
    return gulp.src('src/views/*.pug')
        .pipe(pug({}))
        .pipe(gulp.dest('src/'))
});

gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
    gulp.watch('src/scss/**/*.scss', ['sass']);
    gulp.watch('src/views/**/*.pug', ['views']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('src/views/**/*.pug', browserSync.reload);
    gulp.watch('src/*.html', browserSync.reload);
    gulp.watch('src/js/**/*.js', browserSync.reload);
});

gulp.task('browserSync', function () {
    browserSync.init({
        server: {
            baseDir: 'src'
        },
    });
});

gulp.task('useref', function () {
    return gulp.src('src/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'));
});

gulp.task('images', function () {
    return gulp.src('src/img/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'));
});

gulp.task('fonts', function () {
    return gulp.src('src/fonts/**/*')
        .pipe(gulp.dest('dist/fonts'));
});

gulp.task('clean:dist', function () {
    return del.sync('dist');
});

gulp.task('build', function (callback) {
    console.log('Building project...')
    runSequence('clean:dist', ['views', 'sass', 'useref', 'images', 'fonts'],
        callback
    );

});

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

目录 ListView :

Answer 1

是的。您必须编写所有任务

var gulp = require('gulp'),
  watch = require('gulp-watch'),
  autoprefixer = require('gulp-autoprefixer'),
  jshint = require('gulp-jshint'),
  stylish = require('jshint-stylish'),
  sass = require('gulp-sass'),
  rename = require("gulp-rename"),
  minifyCss = require('gulp-minify-css'),
  uglify = require('gulp-uglify'),
  imagemin = require('gulp-imagemin'),
  concat = require('gulp-concat'),
  plumber = require('gulp-plumber'),
  concatCss = require('gulp-concat-css'),
  jade = require('gulp-jade');

// Jade
gulp.task('jade', function(){
 gulp.src('app/*.jade')
  .pipe(jade({pretty: true}))
  .pipe(gulp.dest('./dist/'));
});

//Sass to dist
gulp.task('sass-dist', function () {
  return gulp.src('app/sass/**/*.scss')
    .pipe(gulp.dest('dist/sass/'));
});

// compiled sass
gulp.task('sass', function () {
  return gulp.src('app/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ['last 10 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('dist/css/'))
    .pipe(minifyCss())
    .pipe(rename({suffix: ".min",}))
    .pipe(gulp.dest('dist/css/'));
});

// Merge all css files in one
gulp.task('css', function(){
  return gulp.src('app/css/*.css')
    .pipe(concatCss("all-pluging.css"))
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css'));
});

// minify images
gulp.task('images', function(){
  return gulp.src('app/images/**/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});
gulp.task('images-content', function(){
  return gulp.src('app/assets/images/**/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/assets/images'));
});

gulp.task('jshint', function(){
  return gulp.src('app/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter(stylish))
});

// Merged all js files in one
gulp.task('concat', function() {
  return gulp.src(['app/js/jquery/*.js','app/js/lib/*.js'])
    .pipe(uglify())
    .pipe(concat('all-plugins.js'))
    .pipe(rename("all-plugins.min.js"))
    .pipe(gulp.dest('dist/js/'));
});



gulp.task('js',function(){                
  gulp.src('app/js/main.js')
    .pipe(plumber())
    .pipe(gulp.dest('dist/js/'))
    .pipe(uglify()) 
    .pipe(rename("main.min.js"))
    .pipe(gulp.dest('dist/js/'));
});


gulp.task('watch', function(){
  gulp.watch('app/*.jade',['jade']);
  gulp.watch('app/sass/*.scss', ['sass-dist','fonts','sass'] );
  gulp.watch('app/assets/images/**/*.*', ["images-content"]);
  gulp.watch('app/images/*.*', ["images"]);
  gulp.watch("app/css/**/*.css", ["css"]);
  gulp.watch('app/js/**/*.js',  ["jshint", "concat", "js"]);
});

// Default
gulp.task('default', ['jade',"sass-dist","sass",'css','fonts',"jshint",'concat','js','images','images-content', "watch"]);