"devDependencies": {
"connect-livereload": "^0.5.3",
"express": "^4.13.3",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-concat": "^2.6.0",
"gulp-jshint": "^1.11.2",
"gulp-minify-css": "^1.2.0",
"gulp-ruby-sass": "^1.0.0",
"gulp-scss-lint": "^0.2.4",
"gulp-uglify": "^1.2.0",
"jshint-stylish": "^2.0.1",
"tiny-lr": "^0.1.6"
}
// gulpfile.js
// requires
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var scsslint = require('gulp-scss-lint');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
// express server
gulp.task('express', function() {
var express = require('express');
var app = express();
app.use(require('connect-livereload')({port: 35729}));
app.use(express.static(__dirname));
app.listen(4000, '0.0.0.0');
});
// tinylr
var tinylr;
gulp.task('livereload', function() {
tinylr = require('tiny-lr')();
tinylr.listen(35729);
});
// auto reload
function notifyLiveReload(event) {
var fileName = require('path').relative(__dirname, event.path);
tinylr.changed({
body: {
files: [fileName]
}
});
}
// lint sass
gulp.task('lint-sass', function() {
gulp.src('src/sass/*.scss')
.pipe(scsslint({'config': '.scss-lint.yml'}));
});
// styles
gulp.task('build-css', ['lint-sass'], function() {
return sass('src/sass', {style: 'expanded'})
.pipe(autoprefixer({browsers: ['last 2 version', 'Firefox < 20', '> 5%'], cascade: false}))
.pipe(concat('theme.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('assets'));
});
// production style build
// gulp.task('build-css', ['styles'], function() {
// return gulp.src('assets/css/*.css')
// .pipe(concat('theme.min.css'))
// .pipe(minifycss())
// .pipe(gulp.dest('assets'));
// });
// lint js
gulp.task('lint-js', function() {
return gulp.src('src/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// production js build
gulp.task('build-js', ['lint-js'], function() {
return gulp.src('src/js/*.js')
.pipe(concat('theme.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets'));
});
// watch
gulp.task('watch', function() {
gulp.watch('src/sass/*.scss', ['build-css']);
gulp.watch('src/js/*.js', ['build-js']);
gulp.watch('*.html', notifyLiveReload);
gulp.watch('assets/theme.min.css', notifyLiveReload);
gulp.watch('assets/theme.min.js', notifyLiveReload);
gulp.watch('assets/img/**/*.*', notifyLiveReload);
});
gulp.task('default', ['build-css', 'build-js', 'express', 'livereload', 'watch'], function() {
console.log('running on... http://localhost:4000')
});