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在用作源的不同文件夹中，因为您要修改生成的文件。使用节点 glob 模式，您可以通过传递文件模式数组的文件扩展名轻松匹配文件，以匹配不同文件夹中的不同文件。

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

希望对您有所帮助。