I've experimented with automation, here's the first Gulp file (yea, it's work in progress).
/*
GULP - watch and compile code
=============================
File: gulpfile.js
Version: 0.1
Tags: Sass watch, Sass compile
By: Per Thykjaer Jensen
Url: http://multimusen.dk/
## Howto
1. Download plugin
2. Require the plugin
3. Define a gulp.task
Run the task either:
* :: gulp [taskname]
* or add the task to the gulp.task default and run via :: gulp
Best Practise
=============
Separate your working files into a src/ and a dest/ directory.
This is my first playground, so the pressent file
structure is a darn mess.
*/
//'use strict';
// === Gulps ===
var gulp = require('gulp');
var sass = require('gulp-sass');
// sass compiler
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('.'));
});
// watcher
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
// sass lint
var sassLint = require('gulp-sass-lint');
gulp.task('sassLint', function () {
gulp.src('sass/**/*.s+(a|c)ss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError());
});
// minify images
var imagemin = require('gulp-imagemin');
gulp.task('imageMin', function () {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/mini'));
});
// === Javascript Lint ===
var jslint = require('gulp-jslint');
var jshint = require('gulp-jshint');
gulp.task('lintJs', function () {
return gulp.src(['js/*.js'])
.pipe(jshint({ /* lint placeholder */ }))
.pipe(jshint.reporter());
});
// === Jade Template Engine ===
jade = require('gulp-jade');
// run this task by typing in gulp jade in CLI
gulp.task('jade', function() {
return gulp.src('src/templates/**/*.jade')
.pipe(jade()) // pip to jade plugin
.pipe(gulp.dest('builds/development'));
});
// === Default ===
gulp.task('default', [
'sass',
'sass:watch',
'imageMin',
'lintJs'], function() {
});