时间戳

首页 > 解决方案 > Css 缩小不起作用（gulp + cssnano）

sass - Css 缩小不起作用（gulp + 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

标签： sassgulpcssnano

解决方案

You should change this sub-task as follows:

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
        }));
});

The first change is in the htmlFiles (i changes it to files for convenience). You need to change the file pattern to match al desired files: *.html, *.js and *.css in the different folders used as sources, because you want to modify the generated files. Using node glob patterns you can easily match the files by file extension passing an array of file patterns, to match different files in different folders..

Then just add a gulpIf condition for the html files tasks to filter the desired file type (you already have the filter function for the other file types).

Hope it helps.

推荐阅读