Skip to content

Instantly share code, notes, and snippets.

@JonCatmull
Created February 11, 2015 09:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JonCatmull/070b23bd8ed0bc3e5fe6 to your computer and use it in GitHub Desktop.
Save JonCatmull/070b23bd8ed0bc3e5fe6 to your computer and use it in GitHub Desktop.
Basic gulp setup for start of project
var folders = {
sass: './resources/sass/', // Location of sass files
sassDest: './htdocs/css', // Where you want complied css files to go
js: ['./resources/js/first.js', './resources/js/plugins/*.js', './resources/js/main.js'], // js files to include (in order listed)
jsDest: './htdocs/js'
}
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint'),
sass = require('gulp-sass'),
prefix = require('gulp-autoprefixer'),
order = require("gulp-order"),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
minifyCSS = require('gulp-minify-css'),
livereload = require('gulp-livereload'),
sourcemaps = require('gulp-sourcemaps');
// A display error function, to format and make custom errors more uniform
// Could be combined with gulp-util or npm colors for nicer output
var displayError = function(error) {
// Initial building up of the error
var errorString = '[' + error.plugin + ']';
errorString += ' ' + error.message.replace("\n",''); // Removes new line at the end
// If the error contains the filename or line number add it to the string
if(error.fileName)
errorString += ' in ' + error.fileName;
if(error.lineNumber)
errorString += ' on line ' + error.lineNumber;
// This will output an error like the following:
// [gulp-sass] error message in file_name on line 1
console.error(errorString);
}
// Lint Task
gulp.task('lint', function() {
return gulp.src(folders.js)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(folders.sass+'**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({errLogToConsole: true}))
.pipe(prefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(folders.sassDest))
.pipe(livereload()) //could stop and start pipe to not generate min sourcemap
.pipe(rename({suffix: ".min"}))
.pipe(minifyCSS())
.pipe(gulp.dest(folders.sassDest));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src(folders.js)
.pipe(concat('all.js'))
.pipe(gulp.dest(folders.jsDest))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest(folders.jsDest));
});
// Watch Files For Changes
gulp.task('watch', function() {
livereload.listen();
gulp.watch(folders.js, ['lint', 'scripts']);
gulp.watch(folders.sass+'**/*.scss', ['sass'])
.on('change', function(evt) {
console.log('[watcher] File ' + evt.path.replace(/.*(?=sass)/,'') + ' was ' + evt.type + ', compiling...');
});
});
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment