Skip to content

Instantly share code, notes, and snippets.

@franksmule
Last active August 8, 2017 20:30
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save franksmule/9817730 to your computer and use it in GitHub Desktop.
Save franksmule/9817730 to your computer and use it in GitHub Desktop.
gulp.js that does SASS, JS Concatenation Watching - Tutorial -> http://omcfarlane.co.uk/install-gulp-js-windows/
//*********** IMPORTS *****************
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var gutil = require('gulp-util');
var rename = require("gulp-rename");
var map = require("map-stream");
var livereload = require("gulp-livereload");
var concat = require("gulp-concat");
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
global.errorMessage = '';
//Configuration - Change me
var sassFiles = [
{
watch: '_scss/Site/**/*.scss',
sass: '_scss/Site/site.scss',
output: './www/app/View/Themed/Site/webroot/css',
name: 'site.css',
},
{
watch: '_scss/Admin/**/*.scss',
sass: '_scss/Admin/admin.scss',
output: './www/app/View/Themed/Admin/webroot/css',
name: 'admin.min.css',
}
];
var jsFiles = [
{
watch: '_assets/admin/*.js',
output: './www/app/View/Themed/Admin/webroot/js/',
name: 'admin.js',
nameMin: 'admin.min.js'
},
{
watch: 'html/js/*.js',
output: './www/app/View/Themed/Site/webroot/js/',
name: 'site.js',
nameMin: 'site.min.js'
}
];
//END configuration
gulp.task('watch', function () {
for (var i in sassFiles) {
sassWatch(sassFiles[i]);
}
for (var j in jsFiles) {
scriptWatch(jsFiles[j]);
}
});
function sassWatch(sassData) {
gulp.src(sassData.watch)
.pipe(watch({glob:sassData.watch, emitOnGlob: true}, function() {
gulp.src(sassData.sass)
.pipe(sass(sassOptions))
.on('error', function(err) {
gutil.log(err.message);
gutil.beep();
global.errorMessage = err.message + " ";
})
.pipe(checkErrors())
.pipe(rename(sassData.name))
.pipe(gulp.dest(sassData.output))
.pipe(livereload());
}));
}
function scriptWatch(jsData) {
gulp.src(jsData.watch)
.pipe(watch({glob:jsData.watch, emitOnGlob: true}, function() {
gulp.src(jsData.watch)
.pipe(concat(jsData.name))
.pipe(gulp.dest(jsData.output))
.pipe(uglify({outSourceMap: false}))
.pipe(rename(jsData.nameMin))
.pipe(gulp.dest(jsData.output));
}));
}
gulp.task('default', ['watch']);
/// Defaults yo
var sassOptions = {
'style': 'compressed',
'unixNewlines': true,
'cacheLocation': '_scss/.sass_cache'
};
// Does pretty printing of sass errors
var checkErrors = function (obj) {
function checkErrors(file, callback, errorMessage) {
if (file.path.indexOf('.scss') != -1) {
file.contents = new Buffer("\
body * { white-space:pre; }\
body * { display: none!important; }\
body:before {\
white-space:pre;\
content: '"+ global.errorMessage.replace(/(\\)/gm,"/").replace(/(\r\n|\n|\r)/gm,"\\A") +"';\
}\
html{background:#ccf!important; }\
");
}
callback(null, file);
}
return map(checkErrors);
};
@igasparetto
Copy link

@57, glob must be string or array.

@sdeering
Copy link

same.

@sdeering
Copy link

This fixes it. Remove the glob: obj as the API has changed.

function sassWatch(sassData) {
    gulp.src(sassData.watch)
    .pipe(watch(sassData.watch, function() {
        gulp.src(sassData.sass)
        .pipe(sass(sassOptions))
        .on('error', function(err) {
                gutil.log(err.message);
                gutil.beep();
                global.errorMessage = err.message + " ";
        })
        .pipe(checkErrors())
        .pipe(rename(sassData.name))
        .pipe(gulp.dest(sassData.output))
        .pipe(livereload());
    }));
}

function scriptWatch(jsData) {
    gulp.src(jsData.watch)
    .pipe(watch(jsData.watch, function() {
        gulp.src(jsData.watch)
        .pipe(concat(jsData.name))
        .pipe(gulp.dest(jsData.output))
        .pipe(uglify({outSourceMap: false}))
        .pipe(rename(jsData.nameMin))
        .pipe(gulp.dest(jsData.output));
    }));
}
``

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment