Created
October 24, 2014 20:15
-
-
Save blivesta/9a3da9063969a14f7de1 to your computer and use it in GitHub Desktop.
Gulp jekyll,less,sass,js,bower,deploy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
// | |
var project = { | |
name:'mom', | |
url:'http://example.com', | |
}; | |
var repo = { | |
url : 'git@github.com:blivesta/mom.git' | |
}; | |
var less = false; // less or sass = false | |
var paths = { | |
source : './src', | |
asset : './src/assets', | |
build : './src/build', | |
vendor : './src/vendor', | |
pub : './dist', | |
bower : './bower_components' | |
}; | |
var messages = { | |
jekyllBuild : '<span style="color: grey">Running:</span> $ jekyll build' | |
}; | |
var replaceFileName = { | |
css: [ project.name + '.css', project.name + '.min.css' ], | |
js: [ project.name + '.js', project.name + '.min.js' ] | |
}; | |
var cssMetaType = function(){ | |
var type; | |
less ? type = "less" : type = "sass"; | |
return type; | |
}; | |
var autoprefixerBrowsers = [ | |
'ie >= 8', | |
'ie_mob >= 8', | |
'ff >= 30', | |
'chrome >= 34', | |
'safari >= 7', | |
'opera >= 23', | |
'ios >= 7', | |
'android >= 4.4', | |
'bb >= 10' | |
]; | |
var uncssIgnoreClass = [ | |
/.navdrawer-container.open/, | |
/.app-bar.open/ | |
]; | |
// Include Gulp & Tools We'll Use | |
var gulp = require('gulp'); | |
var $ = require('gulp-load-plugins')(); | |
var del = require('del'); | |
var runSequence = require('run-sequence'); | |
var mainBowerFiles = require('main-bower-files'); | |
var browserSync = require('browser-sync'); | |
var childProcess = require('child_process'); | |
var pagespeed = require('psi'); | |
var reload = browserSync.reload; | |
// Build the Jekyll Site | |
gulp.task('jekyll', function(done) { | |
browserSync.notify(messages.jekyllBuild); | |
return childProcess.spawn('jekyll', ['build'], { | |
stdio: 'inherit' | |
}) | |
.on('close', done); | |
}); | |
// Optimize Images | |
gulp.task('images', function() { | |
return gulp.src(paths.asset + '/images/**/*') | |
.pipe($.plumber()) | |
.pipe($.newer(paths.build + '/images')) | |
.pipe($.imagemin({ | |
progressive: true, | |
interlaced: true | |
})) | |
.pipe(gulp.dest(paths.build + '/images')) | |
.pipe($.size({ | |
title: 'images' | |
})) | |
}); | |
// JavaScript | |
gulp.task('js', function() { | |
return gulp.src(paths.asset + '/js/**/*.js') | |
.pipe($.plumber()) | |
.pipe($.sourcemaps.init()) | |
.pipe($.concat(project.name + '.js')) | |
.pipe($.sourcemaps.write('./')) | |
.pipe(gulp.dest(paths.build + '/js')); | |
}); | |
// Lint JavaScript | |
gulp.task('jshint', function() { | |
return gulp.src(paths.build + '/js/**/*.js') | |
.pipe(reload({ | |
stream: true, | |
once: true | |
})) | |
.pipe($.jshint()) | |
.pipe($.jshint.reporter('jshint-stylish')) | |
.pipe($.if(!browserSync.active, $.jshint.reporter('fail'))); | |
}); | |
// less or sass | |
gulp.task(cssMetaType(), function() { | |
return gulp.src(paths.asset + '/' + cssMetaType() + '/**/*') | |
.pipe($.plumber()) | |
.pipe($.sourcemaps.init()) | |
.pipe($.if(less,$.less().on('error', console.error.bind(console)))) | |
.pipe($.if(!less,$.sass().on('error', console.error.bind(console)))) | |
.pipe($.autoprefixer(autoprefixerBrowsers)) | |
.pipe($.sourcemaps.write('./')) | |
.pipe(gulp.dest(paths.build + '/css')) | |
.pipe($.size({ title: cssMetaType() })); | |
}); | |
// Lint CSS | |
gulp.task('csslint', function() { | |
return gulp.src(paths.build + '/css/**/*.css') | |
.pipe(reload({ | |
stream: true, | |
once: true | |
})) | |
.pipe($.csslint()) | |
.pipe($.csslint.reporter()) | |
.pipe($.if(!browserSync.active, $.csslint.reporter('fail'))); | |
}); | |
// minify | |
gulp.task('minify', function() { | |
var assets = $.useref.assets(); | |
return gulp.src(paths.pub + '/**/*.html') | |
.pipe(assets) | |
.pipe($.if('*.js', $.uglify({preserveComments: 'some'}))) | |
.pipe($.if('*.css', $.uncss({ | |
html: '*.html', | |
ignore: uncssIgnoreClass | |
}))) | |
.pipe($.if('*.css', $.csso())) | |
.pipe(assets.restore()) | |
.pipe($.useref()) | |
.pipe($.replace(replaceFileName.css)) | |
.pipe($.replace(replaceFileName.js)) | |
.pipe($.if('*.html', $.minifyHtml())) | |
.pipe(gulp.dest(paths.pub)) | |
.pipe($.size({ title: 'minify' })); | |
}); | |
// clean | |
// ======================== | |
gulp.task('clean',function(cb) { | |
runSequence('clean-build','clean-bower', cb); | |
}); | |
gulp.task('clean-build', del.bind(null, [paths.build, paths.pub])); | |
gulp.task('clean-bower', del.bind(null, [paths.bower, paths.vendor])); | |
// bower install | |
// ======================== | |
gulp.task('install',function(cb) { | |
runSequence('clean-bower','bower-install','bower-override', cb); | |
}); | |
gulp.task('bower-install', function() { return $.bower();}); | |
gulp.task('bower-override', function() { | |
return gulp.src(mainBowerFiles(), { base: paths.bower }) | |
.pipe(gulp.dest(paths.vendor)); | |
}); | |
// build | |
// ======================== | |
gulp.task('build',function(cb) { | |
runSequence('clean-build',[cssMetaType(), 'js', 'images'],'jshint','csslint','jekyll', cb); | |
}); | |
// default | |
// ======================== | |
gulp.task('default', ['build'], function() { | |
browserSync({ | |
notify: true, | |
logPrefix: project.name, | |
https: false, | |
server: paths.pub | |
}); | |
gulp.watch([paths.source + '/**/*.html'], ['jekyll', reload]); | |
gulp.watch([paths.asset + '/' + cssMetaType() + '/**/*'], [cssMetaType(),'jekyll', reload]); | |
gulp.watch([paths.asset + '/js/**/*.js'], ['jshint'],['js', reload]); | |
gulp.watch([paths.asset + '/images/**/*'], reload); | |
}); | |
// minify | |
// ======================== | |
gulp.task('min',function(cb) { runSequence('minify', cb); }); | |
// Run PageSpeed Insights | |
// http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY' | |
// ======================== | |
gulp.task('pagespeed', pagespeed.bind(null, { url: project.url, strategy: 'mobile' })); | |
// deploy | |
// ======================== | |
gulp.task('deploy', function () { | |
return gulp.src(paths.pub) | |
.pipe($.deploy({ | |
remoteUrl: repo.url, | |
branch: 'gh-pages' | |
})); | |
}); | |
// sftp-deploy | |
// ======================== | |
gulp.task('sftp-deploy', function () { | |
return gulp.src(paths.pub) | |
.pipe($.sftp({ | |
host: project.url, | |
auth: 'keyMain' | |
})); | |
}); | |
// Load custom tasks from the `tasks` directory | |
try { require('require-dir')('tasks'); } catch (err) {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"devDependencies": { | |
"apache-server-configs": "^2.7.1", | |
"browser-sync": "^1.3.0", | |
"del": "^0.1.2", | |
"gulp": "^3.8.5", | |
"gulp-autoprefixer": "^0.0.8", | |
"gulp-bower":"*", | |
"gulp-concat": "*", | |
"gulp-csscomb":"^3.0.3", | |
"gulp-csslint":"^0.1.5", | |
"gulp-csso": "^0.2.9", | |
"gulp-ftp":"*", | |
"gulp-gh-pages":"*", | |
"gulp-if": "^1.2.1", | |
"gulp-imagemin": "^1.0.0", | |
"gulp-jshint": "^1.6.3", | |
"gulp-less":"*", | |
"gulp-load-plugins": "^0.5.3", | |
"gulp-minify-html": "^0.1.4", | |
"gulp-newer": "^0.3.0", | |
"gulp-plumber":"*", | |
"gulp-replace": "^0.4.0", | |
"gulp-sass":"*", | |
"gulp-size": "^1.0.0", | |
"gulp-sftp":"*", | |
"gulp-sourcemaps": "*", | |
"gulp-uglify": "^0.3.1", | |
"gulp-uncss": "^0.4.5", | |
"gulp-useref": "^0.6.0", | |
"jshint-stylish": "^0.4.0", | |
"main-bower-files":"*", | |
"opn": "^1.0.0", | |
"psi": "^0.1.2", | |
"require-dir": "^0.1.0", | |
"run-sequence": "^0.3.6" | |
}, | |
"engines": { | |
"node": ">=0.10.0" | |
}, | |
"private": true, | |
"scripts": { | |
"test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Love this combo, however I cannot figure out the project structure which is defined in "paths" section, would you be able to describe what is in each folder? additionally any exludes in the jekyll config, As I think I've set something up wrong as every time I edit an .html file it runs the jekyll generator 3 times