Skip to content

Instantly share code, notes, and snippets.

@blivesta
Created October 24, 2014 20:15
Show Gist options
  • Save blivesta/9a3da9063969a14f7de1 to your computer and use it in GitHub Desktop.
Save blivesta/9a3da9063969a14f7de1 to your computer and use it in GitHub Desktop.
Gulp jekyll,less,sass,js,bower,deploy
'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) {}
{
"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)"
}
}
@OwenMelbz
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment