Search code examples
sassgulpcompass

Need to produce 1 CSS file from SCSS with comments - Gulp, SCSS, Compass


I have a set of 5 CSS files currently produced as compressed by my Gulp file.

I need to change my setup so that 1 of the files compiles in compact mode with comments instead. I don't want to apply this with all of my files else they get too big.

Can anyone help?

Here's my gulp file...

    var gulp = require("gulp"),
    del = require("del"),
    concat = require("gulp-concat"),
    rename = require("gulp-rename"),
    compass = require("gulp-compass"),
    uglify = require("gulp-uglify");

var files = {
    js: "ministryweb.js",
    minJs: "ministryweb.min.js",
    compassConfig: "config-release.rb",
    compassConfigDbg: "config-debug.rb",
    compassConfigText: "config-text.rb"
}

var paths = {
    webroot: "./"
};

paths.css = paths.webroot + "css/";
paths.scripts = paths.webroot + "Scripts/";
paths.scss = paths.css + "scss/";
paths.src = paths.scripts + "src/";
paths.bundleJs = paths.scripts + files.js;
paths.minJs = paths.scripts + files.minJs;
paths.compiledCss = paths.css + "*.css";
paths.sourceScss = paths.scss + "*.scss";
paths.compassConfig = paths.css + files.compassConfig;
paths.compassConfigDbg = paths.css + files.compassConfigDbg;
paths.compassConfigText = paths.css + files.compassConfigText;

var runCompass = function (cfgPath) {
    return gulp.src(paths.sourceScss)
      .pipe(compass({
          config_file: cfgPath,
          css: paths.css,
          sass: paths.scss
      }))
      .pipe(gulp.dest(paths.css));
};

gulp.task('clean:js', function (cb) {
    del([
      paths.bundleJs,
      paths.minJs
    ], cb);
});

gulp.task("clean:css", function (cb) {
    del(paths.compiledCss, cb);
});

gulp.task("bundle:js", ["clean:js"], function () {
    return gulp.src([
              paths.src + "global.js",
              paths.src + "ministry.js",
              paths.src + "ministry.menu.js",
              paths.src + "ministry.blog.js",
              paths.src + "disqus-loader.js",
              paths.src + "twitter-loader.js"])
    .pipe(concat(files.js))
    .pipe(gulp.dest(paths.scripts));
});

gulp.task("min:js", ["bundle:js"], function () {
    var ret = gulp.src(paths.bundleJs)
    .pipe(rename(files.minJs))
    .pipe(uglify())
    .pipe(gulp.dest(paths.scripts));

    del(paths.bundleJs);

    return ret;
});

gulp.task("compass", ["clean:css"], function () {
    return runCompass(paths.compassConfig);
});

gulp.task("compass-debug", ["clean:css"], function () {
    return runCompass(paths.compassConfigDbg);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("build-debug", ["bundle:js", "compass-debug"]);

gulp.task("build", ["min:js", "compass"]);

And my config.rb, for my live deploy...

# Require any additional compass plugins here.

#Folder settings
relative_assets = true      #because we're not working from the root
css_dir = "../css"          #where the CSS will saved
sass_dir = "../css/scss"           #where our .scss files are
images_dir = "../images"    #the folder with your images

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded # After dev :compressed
output_style = :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# Obviously
preferred_syntax = :scss

I've tried running a second run on compass on just the single file (text-styles.scss) to compile differently but I can't seem to run compass on just a single file which seems crazy.


Solution

  • I found a solution for this within this article...

    Keeping Sass Folder Structure with Gulp/Compass

    I managed to get a specific file working by using the initial gulp.src as follows...

    gulp.task('compass-text-styles', function () {
        return gulp.src(paths.scss + "text-styles.scss")
          .pipe(compass({
              config_file: paths.compassConfigText,
              css: paths.css,
              sass: paths.scss
          }))
          .pipe(gulp.dest(paths.css));
    });
    
    gulp.task("clean", ["clean:js", "clean:css"]);
    
    gulp.task("build-debug", ["bundle:js", "compass-debug"]);
    
    gulp.task("build", ["min:js", "compass-text-styles", "compass"]);
    

    My mistake in prior attempts was trying to apply the file name to the sass compass parameter.