Css 缩小不起作用（gulp + cssnano）

Question

我有一个非常基本的 gulpfile 设置如下：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var notify = require('gulp-notify');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');

/*----------  Config settings  ----------*/

var config = {
    devPath: './app/',
    publicPath: './dist/',
    sassDir: 'sass/',
    jsDir: 'js/',
    cssDir: 'css/',
    fontDir: 'fonts/',
    moduleDir: './node_modules',
}

/*----------  Define tasks  ----------*/

gulp.task('browserSync', function() {
    var htmlDir = config.publicPath;

    browserSync.init({
        server: {
            baseDir: htmlDir
        },
    })
})

gulp.task('sassTask', function () {
    var sassFiles = config.devPath + config.sassDir + '/*.scss';
    var destDir = config.publicPath + config.cssDir;

    return gulp.src(sassFiles)
        .pipe(sass()
            .on("error", notify.onError(function (error) {
                return "Error: " + error.message;
            })))
        .pipe(gulp.dest(destDir));
});

gulp.task('useref', function(){
    var htmlFiles = config.devPath + '*.html';
    var destDir = config.publicPath;

    return gulp.src(htmlFiles)
        .pipe(useref())
        // Minifies only if it's a JavaScript file
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest(destDir))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('js', function() {
    var jsFiles = config.devPath + config.jsDir + '**/*.js';    // All files
    var destDir = config.publicPath + config.jsDir;

    return gulp.src(jsFiles)
                .pipe(gulp.dest(destDir));
});

gulp.task('fonts', function() {
    var fontFiles = config.devPath + config.fontDir + '**/*';   // All files
    var destDir = config.publicPath + config.fontDir;

    return gulp.src(fontFiles)
                .pipe(gulp.dest(destDir));
});

/*----------  Define watch  ----------*/

gulp.task('watch', ['browserSync', 'sassTask', 'js', 'useref', 'fonts'], function () {
    var sassFiles = config.devPath + config.sassDir + '**/*.scss';
    var jsFiles = config.devPath + config.jsDir + '**/*.js';
    var htmlFiles = config.devPath + '*.html';
    var fontFiles = config.devPath + config.fontDir + '**/*';

    gulp.watch(sassFiles, ['sassTask', 'useref']);
    gulp.watch(jsFiles, ['js', 'useref']);
    gulp.watch(htmlFiles, ['useref']);
    gulp.watch(fontFiles, ['fonts']);
});

gulp.task('default', ['browserSync', 'sassTask', 'useref', 'fonts']);

运行“gulp watch”（浏览器同步、sass 等）时一切正常，但 css 缩小却不行。 dist/css 文件夹中的输出文件“style.css”未缩小。我究竟做错了什么？我错过了一个模块吗？提前感谢您的帮助。

我的文件结构：

├───app
│   ├───fonts
│   ├───js
│   └───sass
├───dist
│   ├───css
│   │   └───vendor
│   ├───fonts
│   ├───img
│   │   ├───common
│   │   └───layout
│   └───js
│       └───vendor

Answer 1

您应该按如下方式更改此子任务：

gulp.task('useref', function(){
    var files = [
        config.devPath + '*.html', 
        config.publicPath + config.jsDir + '*.js',
        config.publicPath + config.cssDir + '*.css'
    ];
    var destDir = config.publicPath;

    return gulp.src(files)
        // Run useref only if it’s an HTML file
        .pipe(gulpIf('*.html', useref()))
        // Minifies only if it's a JavaScript file
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest(destDir))
        .pipe(browserSync.reload({
            stream: true
        }));
});

第一个更改是在htmlFiles 中（为方便起见，我将其更改为files）。您需要更改文件模式以匹配所有所需的文件：*.html、*.js 和 *.css 在用作源的不同文件夹中，因为您要修改生成的文件。使用node glob patterns，您可以通过传递文件模式数组的文件扩展名轻松匹配文件，以匹配不同文件夹中的不同文件..

然后只需为html 文件任务添加一个gulpIf 条件以过滤所需的文件类型（您已经拥有其他文件类型的过滤功能）。

希望对你有帮助。