如何使用 gulp-sass 生成有效的缩小 WP style.css 文件？答案

【问题标题】：How to use gulp-sass to generate a valid minified WP style.css file?如何使用 gulp-sass 生成有效的缩小 WP style.css 文件？
【发布时间】：2017-03-02 10:21:57
【问题描述】：

我正在开发一个轻量级的 Wordpress 主题，我想使用所需的 style.css 文件作为我唯一的 CSS 文件。

我的要求是：

必须有Wordpressstylesheet header，
并且上面的 CSS 代码应该被缩小。

我正在使用 SASS，并使用 gulp-sass 对其进行编译。现在，我正在做：

/* gulpfile.babel.js */

const base = {
    src: 'src',
    dest: 'my-theme'
};

const routes = {
    sass: {
        src: `${base.src}/scss/style.scss`,
        dest: `${base.dest}/`
    }
};

gulp.task('styles', () => {
    return gulp.src(routes.sass.src)
    .pipe(plumber((err) => {
        console.error(err.message);
    }))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest(routes.sass.dest));
});

我的style.scss 包含：

/*
Theme Name: My Theme Name
Theme URI: http://example.com/my-theme
Author: My name
Author URI: http://example.com/
Description: My theme description
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: custom, lightweight
Text Domain: textdomain

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import 'common';

这可行，但不符合我的第二个要求（缩小的 CSS）。如果我添加

.pipe(sass({outputStyle: 'compressed'}))

然后我失去了标题。我在 gulp-sass 或 node-sass 上找不到任何选项来缩小和保留 /* … */ cmets。

有没有人想出解决办法？

【问题讨论】：

标签： wordpress sass gulp

【解决方案1】：

不要使用compress 选项来缩小你的CSS。请改用gulp-cssnano 插件。无论如何它会更好，它支持 discardComments 选项，您可以将其设置为 false 以保留 cmets：

var cssnano = require('gulp-cssnano');

gulp.task('styles', () => {
    return gulp.src(routes.sass.src)
    .pipe(plumber((err) => {
        console.error(err.message);
    }))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cssnano({discardComments:false}))
    .pipe(gulp.dest(routes.sass.dest));
});

【讨论】：

【解决方案2】：

我的建议是您可以使用 gulp-concat 和 run-sequence 来满足您的要求。可以将header分离成另外一个文件，等待sass任务完成，然后和header文件concat到一起。

var gulp = require('gulp');
var runSequence = require('run-sequence');
var concat = require('gulp-concat');

/**
 * Gulp task to run your current styles and 
 * the task to append the header in sequence
 */
gulp.task('stylesWithHeader', function(callback) {
    runSequence('styles', 'prepend-header', callback);
});

/**
 * Gulp task to generate the styles.css file with theme header
 */
gulp.task('prepend-header', function(callback) {
    return gulp.src([HEADER_FILE.txt, COMPILED_STYLES_WITHOUT_HEADER.css])
        .pipe(concat("styles.css"))
        .pipe(gulp.dest(PATH_TO_YOUR_TEMPLATE))
        ;
});

Gulp 连接：https://www.npmjs.com/package/gulp-concat.

Gulp 运行顺序：https://www.npmjs.com/package/run-sequence

【讨论】：