Mining CSS + Gulp

Question

我有这个gulpfile.js来编译CSS，但我也想缩小CSS。我尝试运行我在互联网上找到的许多不同代码，但是它们都不起作用。有人可以帮我吗？谢谢

    var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', gulp.series(function() {
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // converter o Sass em CSS
        .pipe(gulp.dest('css'));
}));

gulp.task('watch', gulp.series(function() {
    gulp.watch(['scss/*.scss'], gulp.parallel(['sass']));
}));

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

Answer 1

这是我的gulp文件，它会编译并缩小CSS和JS（它也有一些图像和php文件的数据，但它们尚未使用）

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    touch = require('gulp-touch-cmd'),
    plugin = require('gulp-load-plugins')(),
    merge = require('merge-stream');

// Select Foundation components, remove components project will not use
const SOURCE = {
    scripts: [
        // Place custom JS here, files will be concantonated, minified if ran with --production
        'assets/scripts/**/*.js',
    ],

    // Scss files will be concantonated, minified if ran with --production
    styles: 'assets/style/scss/**/*.scss',

    // Images placed here will be optimized
    images: 'assets/images/src/**/*',

    php: '**/*.php'
};

const ASSETS = {
    styles: 'assets/style/',
    stylesDist: 'assets/dist/style',
    scripts: 'assets/scripts/',
    scriptsDist: 'assets/dist/scripts',
    images: 'assets/images/',
    all: 'assets/dist/'
};

gulp.task('log', function() {
    console.log(ASSETS.styles);
});

// Compile Sass, Autoprefix and minify
gulp.task('styles', function () {

    var bulk = gulp.src(SOURCE.styles);

    return merge(bulk)
        .pipe(plugin.plumber(function (error) {
            gutil.log(gutil.colors.red(error.message));
            this.emit('end');
        }))
        .pipe(plugin.sourcemaps.init())
        .pipe(plugin.sass())
        .pipe(plugin.autoprefixer({
            browsers: [
                'last 2 versions',
                'ie >= 9',
                'ios >= 7'
            ],
            cascade: false
        }))
        .pipe(plugin.cssnano({ safe: true, minifyFontValues: { removeQuotes: false } }))
        .pipe(plugin.sourcemaps.write('.'))
        .pipe(gulp.dest(ASSETS.stylesDist))
        .pipe(touch());
});


// GULP FUNCTIONS
// JSHint, concat, and minify JavaScript
gulp.task('scripts', function () {

    // Use a custom filter so we only lint custom JS

    return gulp.src(SOURCE.scripts)
        .pipe(plugin.plumber(function (error) {
            gutil.log(gutil.colors.red(error.message));
            this.emit('end');
        }))
        .pipe(plugin.sourcemaps.init())
        .pipe(plugin.babel({
            presets: ['es2015'],
            compact: true,
            ignore: ['what-input.js']
        }))
        .pipe(plugin.concat('scripts.js'))
        .pipe(plugin.uglify())
        .pipe(plugin.sourcemaps.write('.')) // Creates sourcemap for minified JS
        .pipe(gulp.dest(ASSETS.scriptsDist))
        .pipe(touch());
});


// Watch files for changes (without Browser-Sync)
gulp.task('watch', function () {
    // Watch .scss files
    gulp.watch(SOURCE.styles, gulp.parallel('styles'));

    // Watch scripts files
    gulp.watch(SOURCE.scripts, gulp.parallel('scripts'));
});

Answer 2

要修复您的代码，请尝试：

gulp.task('sass', function() {
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // converter o Sass em CSS
        .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
    gulp.watch(['scss/*.scss'], gulp.series('sass'));
});

gulp.task('default', gulp.series('sass', 'watch'));

---

但是这种形式的函数更好：

     // renamed since your plugin name is apparently `sass` as well
function sass2css() {   
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // converter o Sass em CSS
        .pipe(gulp.dest('css'));
};

function watch() {
    gulp.watch(['scss/*.scss'], gulp.series(sass2css));
});

gulp.task('default', gulp.series(sass2css, watch));