Gulp构建任务

Question

How should I form my 'build' task in my gulpfile.js ? Right now I have only set a runSequence on all my current tasks, which destination is the src folder and not distribution.

Should I write secondary tasks like for example sass-dist , 'js-dist' etc..?

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

Dir list view:

Answer 1

Yes. You must write all tasks

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