Gulp构建任务

时间:2017-05-30 08:04:33

标签: javascript build gulp

我应该如何在'build'中形成gulpfile.js任务?现在我只在所有当前任务上设置了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
    );
});




目录列表视图:

enter image description here

1 个答案:

答案 0 :(得分:2)

是。您必须编写所有任务

col_v = next(ws2.columns)
col_n = next(ws2.columns)

enter image description here