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.
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.