我正在开发一个轻量级的WordPress主题,我想将所需的style.css
文件用作我的唯一CSS文件。
我的要求是:
- 它必须具有WordPress Stylesheet标题,
- 和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
上的任何选项以缩小&保存/* … */
评论。
有人为此找到了解决方案吗?
不要使用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));
});
我的建议是,您可以使用Gulp-Concat和运行序列来满足您的要求。您可以将标题分为另一个文件,等待SASS任务完成,然后将其和标头文件condect。
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 Concat:https://www.npmjs.com/package/gulp-concat。
gulp运行序列:https://www.npmjs.com/package/run-sequence