Question

我的一位员工给了我一个名为gulpfile.js的文件，其中包含以下代码。它会在保存时监视并编译我的scss文件。

var gulp       = require('gulp'),
gutil      = require('gulp-util'),
browserify = require('browserify'),
uglify     = require('gulp-uglify'),
concat     = require('gulp-concat'),
changed    = require('gulp-changed'),
compass    = require('gulp-compass'),
buffer     = require('vinyl-buffer'),
source     = require('vinyl-source-stream'),
livereload = require('gulp-livereload');

var scssSources = [
        '_src/scss/**/*.scss'
    ],
    jsSources = [
        '_src/js/main.js'
    ],
    jsVendorSources = [
        '_src/js/vendor.js'
    ],
    scriptsPath = 'assets/js',
    scssPath    = 'assets/css';

var onError = function (error)
{
    gutil.log(gutil.colors.red(error));
    this.emit('end');
};

gulp.task('sass', function()
{
    gulp.src(scssSources)
        .pipe(changed(scssPath))
            .on('error', onError)
        .pipe(compass({
            style: 'expanded',
            sass: '_src/scss',
            css: scssPath,
            relative: true,
            require: ['breakpoint', 'susy']
        }))
            .on('error', onError)
        .pipe(gulp.dest(scssPath))
        .pipe(livereload())
});

gulp.task('js', function()
{
    return browserify(jsSources)
            .on('error', onError)
        .bundle()
            .on('error', onError)
        .pipe(source('main.js'))
            .on('error', onError)
        .pipe(buffer())
            .on('error', onError)
        //.pipe(uglify())
            //.on('error', onError)
        .pipe(gulp.dest(scriptsPath))
        .pipe(livereload());
});

gulp.task('js-vendor', function()
{
    return browserify(jsVendorSources)
            .on('error', onError)
        .bundle()
            .on('error', onError)
        .pipe(source('vendor.js'))
            .on('error', onError)
        .pipe(buffer())
            .on('error', onError)
        //.pipe(uglify())
            //.on('error', onError)
        .pipe(gulp.dest(scriptsPath))
        .pipe(livereload());
});

gulp.task('watch', function()
{
    livereload.listen();
    gulp.watch(['_src/js/main.js', '_src/js/scripts/**/*.js'], ['js']);
    gulp.watch(['_src/js/vendor.js', '_src/js/vendor/**/*.js'], ['js-vendor']);
    gulp.watch(scssSources, ['sass']);
    gulp.watch(['**/*.php', '**/*.html', '**/*.twig']).on('change', function(file) { livereload.changed(file.path) })
});

gulp.task('default', ['watch']);

但是我现在希望使用npm包＆＃34; gulp-clean-css＆＃34;来缩小我的css输出。（https://www.npmjs.com/package/gulp-clean-css）。如何将其添加到上面的现有gulp文件中？

到目前为止，我已经进入我的Wordpress主题目录并运行npm install gulp-clean-css --save-dev - 所以我假设我只需要以某种方式对其进行编码？

还需要信息吗？

致以最诚挚的问候，

奥利弗

Answer 1

我刚刚被告知我可以将样式从“扩展”改为“压缩”。卫生署。希望这对任何人都有帮助！

将gulp-clean-css添加到现有的gulpfile.js

1 个答案: