Skip to content

Instantly share code, notes, and snippets.

@dbasilioesp
Created November 24, 2014 11:44
Show Gist options
  • Save dbasilioesp/56caa47ab9da0bbbe962 to your computer and use it in GitHub Desktop.
Save dbasilioesp/56caa47ab9da0bbbe962 to your computer and use it in GitHub Desktop.
Flow using Gulp
'use strict';
// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var concat = require('gulp-concat');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var wiredep = require('wiredep').stream;
var reload = browserSync.reload;
var AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
];
// Lint JavaScript
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe(reload({stream: true, once: true}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
// Optimize Images
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size({title: 'images'}));
});
// Copy All Files At The Root Level (app)
gulp.task('copy', function () {
return gulp.src([
'app/*',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'))
.pipe($.size({title: 'copy'}));
});
// Copy Web Fonts To Dist
gulp.task('fonts', function () {
return gulp.src(['app/fonts/**'])
.pipe(gulp.dest('dist/fonts'))
.pipe($.size({title: 'fonts'}));
});
// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function () {
// For best performance, don't add Sass partials to `gulp.src`
return gulp.src([
'app/styles/*.scss',
'app/styles/**/*.scss',
'app/styles/**/*.css',
'app/styles/components/components.scss'
])
.pipe($.changed('styles', {extension: '.scss'}))
.pipe($.rubySass({
style: 'expanded',
precision: 10
})
.on('error', console.error.bind(console))
)
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('.tmp/styles'))
.pipe($.if('*.css', $.csso()))
.pipe(gulp.dest('dist/styles'))
.pipe($.size({title: 'styles'}));
});
gulp.task('scripts', function() {
return gulp.src([
'./app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js',
'./app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js',
'./app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js',
'./app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js',
'./app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js',
'./app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js',
'./app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/button.js'
])
.pipe(concat('bootstrap.js'))
.pipe(gulp.dest('././app/vendors/bootstrap-sass-official/assets/javascripts'));
});
// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
var assets = $.useref.assets({searchPath: ['.tmp', 'app']});
return gulp.src('app/**/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
.pipe($.if('*.css', $.uncss({
html: ['app/index.html'],
ignore: [
/.navdrawer-container.open/,
/.app-bar.open/
]
})))
.pipe($.if('*.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
.pipe($.replace('components/components.css', 'components/main.min.css'))
.pipe($.if('*.html', $.minifyHtml()))
.pipe(gulp.dest('dist'))
.pipe($.size({title: 'html'}));
});
gulp.task('wiredep', function(){
return gulp.src('./app/index.html')
.pipe(wiredep({
directory: './app/vendors',
exclude: ['bootstrap-sass-official', 'requirejs'],
}))
.pipe(gulp.dest('./app'));
});
// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist', '.sass-cache']));
// Watch Files For Changes & Reload
gulp.task('serve', ['wiredep', 'styles'], function () {
browserSync({
notify: false,
server: ['.tmp', 'app']
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
gulp.watch(['app/scripts/**/*.js'], ['jshint']);
gulp.watch(['app/images/**/*'], reload);
});
// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function () {
browserSync({
notify: false,
server: 'dist'
});
});
// Build Production Files, the Default Task
gulp.task('default', ['clean'], function (cb) {
runSequence('styles', ['jshint', 'wiredep', 'html', 'images', 'fonts', 'copy'], cb);
});
// Load custom tasks from the `tasks` directory
try { require('require-dir')('tasks'); } catch (err) {}
// Run PageSpeed Insights
// Update `url` below to the public URL for your site
// gulp.task('pagespeed', pagespeed.bind(null, {
// url: 'https://example.com',
// strategy: 'mobile'
// }));
{
"devDependencies": {
"browser-sync": "^1.3.0",
"del": "^0.1.2",
"gulp": "^3.8.5",
"gulp-autoprefixer": "^0.0.8",
"gulp-bower": "0.0.6",
"gulp-cache": "^0.2.2",
"gulp-concat": "^2.4.1",
"gulp-changed": "^1.0.0",
"gulp-csso": "^0.2.9",
"gulp-flatten": "^0.0.2",
"gulp-if": "^1.2.1",
"gulp-imagemin": "^1.0.0",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.5.3",
"gulp-minify-html": "^0.1.4",
"gulp-replace": "^0.4.0",
"gulp-ruby-sass": "^0.7.1",
"gulp-size": "^1.0.0",
"gulp-uglify": "^0.3.1",
"gulp-uncss": "^0.4.5",
"gulp-useref": "^0.6.0",
"jshint-stylish": "^0.4.0",
"opn": "^1.0.0",
"psi": "^0.1.2",
"require-dir": "^0.1.0",
"run-sequence": "^0.3.6",
"wiredep": "^1.8.6"
},
"engines": {
"node": ">=0.10.0"
},
"private": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment