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 
 
    ); 
 
});

目录列表视图：

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"]);