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

我正在開發一個輕量級的WordPress主題，我想使用所需的style.css文件作爲我唯一的CSS文件。如何使用gulp-sass生成有效的縮小WP style.css文件？

我的要求是：

它必須有WordPress的stylesheet 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上找到任何選項，以縮小&保留/* … */的評論。

有沒有人想出瞭解決方案？

來源

2017-03-02 Jordi Nebot

不要使用compress選項來縮小你的CSS。改爲使用gulp-cssnano插件。無論如何它都更好，它支持discardComments選項，您可以設置爲false以保留評論：

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

來源

2017-03-02 11:54:48

我的建議是你可以使用gulp-concat和run-sequence來達到你的要求。您可以將標題分隔爲另一個文件，等待sass任務完成，並將它和頭文件一起連接。

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

咕嘟咕嘟CONCAT：https://www.npmjs.com/package/gulp-concat。

咕嘟咕嘟運行順序：https://www.npmjs.com/package/run-sequence

來源

2017-03-02 11:45:08

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

回答

相關問題