CODEWITHSUNDEEP
wordpresssassgulp
Jordi Nebot
Jordi Nebot

Reputation: 3401

How to use gulp-sass to generate a valid minified WP style.css file?

I'm developing a lightweight Wordpress theme and I'd like to use the required style.css file as my only CSS file.

My requirements are:

  1. It must have the Wordpress stylesheet header,
  2. and CSS code on it should be minified.

I'm using SASS and I'm transpiling it with gulp-sass. Right now, I'm doing:

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

And my style.scss contains:

/*
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';

This works but it doesn't fit my 2nd requirement (minified CSS). If I add

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

then I'm loosing the header. I can't find any option on gulp-sass or node-sass to both minify & preserve /* … */ comments.

Has anyone figured out a solution for this?

Upvotes: 0

Views: 578

Answers (2)

Sven Schoenung
Sven Schoenung

Reputation: 30564

Don't use the compress option to minify your css. Use the gulp-cssnano plugin instead. It's better anyway and it supports a discardComments options that you can set to false in order to preserve comments:

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

Upvotes: 1

Thai Duong Tran
Thai Duong Tran

Reputation: 2522

My suggestion is you can use gulp-concat and run-sequence to achieve your requirement. You can separate the header into another file, wait for the sass task finishes, and concat it and the header file together.

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 run sequence: https://www.npmjs.com/package/run-sequence

Upvotes: 1

Related Questions