gulpjs.com - Automate and enhance your workflow
# Install Gulp globally
$ npm install --global gulp
# Install Gulp as a dev dependency
$ npm init # Creates the package.json file
$ npm install --save-dev gulp
# Install Gulp Utilities
$ npm install --save-dev gulp-utilThen we have to create the gulpfile.js file:
/* File: gulpfile.js */
// grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util');
// create a default task and just log a message
gulp.task('default', function() {
return gutil.log('Gulp is running!')
});This it to test that Gulp is working. ;)
# Install jshint
$ npm install --save-dev gulp-jshint jshint-stylish/* File: gulpfile.js */
// grab our packages
var gulp = require('gulp'),
jshint = require('gulp-jshint');
// define the default task and add the watch task to it
gulp.task('default', ['watch']);
// configure the jshint task
gulp.task('jshint', function() {
return gulp.src('source/javascript/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
gulp.watch('source/javascript/**/*.js', ['jshint']);
});Then we can call the task:
$ gulp jshint/* file: gulpfile.js */
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
sass = require('gulp-sass');
/* jshint task would be here */
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/stylesheets'));
});
/* updated watch task to include sass */
gulp.task('watch', function() {
gulp.watch('source/javascript/**/*.js', ['jshint']);
gulp.watch('source/scss/**/*.scss', ['build-css']);
});