Sass Css缩小不起作用（gulp&x2B；cssnano）

我有一个非常基本的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

---

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

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

中（为了方便起见，我将其更改为

文件）。您需要更改文件模式以匹配用作源的不同文件夹中的所有所需文件：
*.html
、
*.js
和
*.css
，因为您要修改生成的文件。使用，您可以通过传递一组文件模式的文件扩展名轻松匹配文件，以匹配不同文件夹中的不同文件

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

希望能有所帮助。
js文件是否变得丑陋？这也不应该起作用，的确。js uglifier也不起作用。谢谢你的帮助。我试图用你的更改我的useref子任务，但仍然没有效果。@onerkript真的吗？html文件是否传递给useref？你能发布你的文件结构吗？可能模式应该更改为匹配子目录
***/{*.html，*.js，*.css}
@onerkript您可以发布文件结构吗？好的，我用我的文件结构编辑了我的原始文章。@onerkript我修改了文件模式。现在应该可以了。否则，我们可以将模式拆分为一个数组。