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‘(浏览器同步、sass等)时，一切都运行正常。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条件，以过滤所需的文件类型(您已经为其他文件类型提供了过滤功能)。

希望能有所帮助。