Skip to content

Instantly share code, notes, and snippets.

@leek
Last active April 8, 2022 04:01
Show Gist options
  • Save leek/9a2141772fe849336fac to your computer and use it in GitHub Desktop.
Save leek/9a2141772fe849336fac to your computer and use it in GitHub Desktop.
'use strict';
// 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 browserSync = require('browser-sync');
var reload = browserSync.reload;
var args = require('yargs').argv;
var path = require('path');
var fs = require('fs');
// Grab bower_components directory
if (fs.existsSync('./.bowerrc')) {
var bower_config = JSON.parse(fs.readFileSync('./.bowerrc'));
bower_path = bower_config.directory;
}
var bower_path = bower_path || './bower_components';
//
// Config
var config = {
environment : (args.env || args.environment || 'development'),
browsersync_proxy : 'dev.example.com',
header : '/** DO NOT EDIT! This file is automatically generated by gulp.js **/',
sass_path : 'src/sass',
source_images_path : 'src/img',
source_javascripts_path : 'src/js',
source_fonts_path : 'src/fonts',
source_html_path : 'src',
http_path : 'dest',
javascripts_path : 'dest/js',
css_path : 'dest/css',
images_path : 'dest/img',
fonts_path : 'dest/fonts',
html_path : 'dest',
sass_includes : [
//bower_path + '/normalize-scss',
//bower_path + '/bourbon/dist'
]
};
// Prepend sass path to includes
config.sass_includes.unshift(config.sass_path);
// Prepend the CWD to each SASS include (above)
config.sass_includes = config.sass_includes.map(function(includePath) {
return path.join(process.cwd(), includePath);
});
//
// BrowserSync
gulp.task('browser-sync', function() {
browserSync({
// server: {
// baseDir: "./" + config.http_path
// }
// ... or ...
proxy: config.browsersync_proxy,
online: true,
open: "external",
host: config.browsersync_proxy
});
gulp.watch(config.html_path+'/**/*.html', reload);
// gulp.watch(config.css_path+'/**/*.css', reload);
gulp.watch(config.javascripts_path+'/**/*.js', reload);
// gulp.watch(config.images_path+'/**/*', reload);
});
//
// Images
gulp.task('images', function() {
var filter_svg = $.filter('**/*.svg');
var filter_other = $.filter('**/*.{png,gif,jpg,jpeg}');
return gulp.src(config.source_images_path+'/**/*')
.pipe(filter_other)
.pipe($.cache($.imagemin({progressive: true, interlaced: true})))
.pipe(filter_other.restore())
.pipe(filter_svg)
.pipe($.cache($.svgmin()))
.pipe(filter_svg.restore())
.pipe(gulp.dest(config.images_path))
.pipe(reload({ stream: true }))
;
});
gulp.task('images:watch', function() {
return gulp.watch(config.source_images_path+'/**/*', ['images']).on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
//
// SASS
gulp.task('sass', function() {
return gulp.src(['Gemfile', 'Gemfile.lock', config.sass_path+'/**/*.scss'])
.pipe($.rubySass({
sourcemap: !(config.environment === 'production'),
compass: false,
quiet: true,
bundleExec: true,
style: (config.environment === 'production') ? 'compressed' : 'expanded',
precision: 10,
loadPath: config.sass_includes
}))
.pipe($.rename(function (currentPath) {
if (currentPath.basename.indexOf('.min') === -1) {
currentPath.basename += '.min';
}
}))
.pipe(gulp.dest(config.css_path))
;
});
gulp.task('sass:watch', function() {
return gulp.watch(config.sass_path+'/**/*.scss', ['sass']).on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
//
// Styles
gulp.task('styles', function() {
return gulp.src(config.css_path+'/**/*.css')
.pipe($.pleeease())
.pipe($.if(config.environment === 'production', $.minifyCss()))
.pipe($.if(config.header, $.header(config.header+'\n')))
.pipe(gulp.dest(config.css_path))
.pipe(reload({ stream: true }))
;
});
gulp.task('styles:watch', function() {
return gulp.watch(config.css_path+'/**/*.css', ['styles']).on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('styles:clean', del.bind(null, [config.css_path]));
//
// Scripts
gulp.task('scripts', function() {
return gulp.src(config.source_javascripts_path+'/**/*.js')
.pipe($.if(config.environment === 'production', $.uglify()))
.pipe($.if(config.environment === 'production', $.stripDebug()))
.pipe($.header(config.header+'\n'))
.pipe($.rename(function (currentPath) {
if (currentPath.basename.indexOf('.min') === -1) {
currentPath.basename += '.min';
}
}))
.pipe(gulp.dest(config.javascripts_path))
;
});
gulp.task('scripts:watch', function() {
return gulp.watch(config.source_javascripts_path+'/**/*.js', ['scripts']).on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('scripts:clean', del.bind(null, [config.javascripts_path]));
//
// HTML Fileinclude
gulp.task('html', function() {
return gulp.src(config.source_html_path+'/*.html')
.pipe($.fileInclude({prefix: '@@', basepath: '@file' }))
.pipe(gulp.dest(config.html_path))
;
});
gulp.task('html:watch', function() {
return gulp.watch(config.source_html_path+'/**/*.html', ['html']).on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('html:clean', del.bind(null, [config.html_path]));
//
// Fonts
gulp.task('fonts', function() {
return gulp.src(config.source_fonts_path+'/**/*.{eot,svg,ttf,woff}')
.pipe(gulp.dest(config.fonts_path))
;
});
gulp.task('fonts:clean', del.bind(null, [config.fonts_path]));
//
// Main Tasks
// Clean
gulp.task('clean', ['styles:clean']);
// Watch
gulp.task('watch', ['images:watch', 'sass:watch', 'styles:watch', 'scripts:watch', 'html:watch']);
// Build
gulp.task('build', function(cb) {
console.log('---');
console.log('Building project using environment: ' + config.environment);
console.log('---');
runSequence('clean', ['fonts', 'images', 'scripts'], 'sass', 'styles', 'html', cb);
});
// Default
gulp.task('default', function(cb) {
runSequence('build', 'watch', 'browser-sync', cb);
});
{
"main": "gulpfile.js",
"author": "Chris Jones <leeked@gmail.com>",
"devDependencies": {
"browser-sync": "^1.3.7",
"del": "^0.1.3",
"gulp": "^3.8.8",
"gulp-bytediff": "^0.2.0",
"gulp-cache": "^0.2.2",
"gulp-clean": "^0.3.1",
"gulp-file-include": "^0.5.1",
"gulp-filter": "^1.0.2",
"gulp-header": "^1.0.5",
"gulp-if": "^1.2.4",
"gulp-imagemin": "^1.0.1",
"gulp-load-plugins": "^0.6.0",
"gulp-minify-css": "^0.3.8",
"gulp-pleeease": "^1.0.4",
"gulp-rename": "^1.2.0",
"gulp-ruby-sass": "^0.7.1",
"gulp-strip-debug": "^1.0.1",
"gulp-svgmin": "^0.4.6",
"gulp-uglify": "^1.0.1",
"run-sequence": "^0.3.6",
"yargs": "^1.3.1"
},
"private": true,
"scripts": {
"test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)"
}
}
{
"fallbacks": {
"autoprefixer": [
"last 2 versions",
"safari 5",
"ie 8",
"ie 9",
"opera 12.1",
"ios 6",
"android 4"
]
}
}

Includes:

  • Configuration
  • BrowserSync
  • Environments (e.g.,: --environment=production)
  • Image optimization (gif, jpg, png, and svg)
  • Sass compilation with external libraries
  • Bower installed Sass libraries example(s)
  • CSS processing with Pleeease
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment