Created
September 21, 2014 16:11
-
-
Save androide-osorio/7076583565b4d32474fc to your computer and use it in GitHub Desktop.
GulpJS workflow example
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
/* | |
Assets Tasks file with Gulp | |
Uses Gulp as build system. used mainly for watching changes | |
on the assets and process them to then copy the results into the | |
public directory | |
*/ | |
//require gulp and gulp-load-plugins. We then call the gulp-load-plugins task | |
//to automatically load all installed gulp plugins | |
var gulp = require("gulp"), | |
plugins = require("gulp-load-plugins")(), | |
bowerFiles = require('main-bower-files'), | |
server = require('tiny-lr')(); | |
var watchify = require('watchify'), | |
browserify = require('browserify'), | |
source = require('vinyl-source-stream'); | |
//PATHS | |
var sassDir = 'sass', | |
targetCssDir = '../styles', | |
//javascript paths | |
coffeeDir = 'coffee', | |
targetJsDir = '../scripts', | |
//twig views directory | |
twigViewsDir = '../views', | |
//images directory | |
imagesDir = 'images', | |
targetImgDir = '../images', | |
//bower dependencies directory for live-reload | |
bowerDir = 'vendor'; | |
//------------------------------------------------------------------------------------ | |
/* ------------------------------------- * | |
* TASKS | |
* ------------------------------------- */ | |
/* Sass compile */ | |
gulp.task('sass', function() { | |
return gulp.src(sassDir + '/*.scss') | |
.pipe( plugins.compass({config_file: 'config.rb', css: '../'}).on('error', plugins.util.log) ) | |
.pipe( plugins.plumber() ) | |
.pipe( plugins.autoprefixer('last 10 versions') ) | |
.pipe( plugins.rename('styles.css') ) | |
.pipe( gulp.dest(targetCssDir) ) | |
.pipe( plugins.notify('SASS Compile Done!.') ) | |
.pipe( plugins.livereload(server) ); | |
}); | |
/* coffee compile */ | |
gulp.task('coffee', function() { | |
return gulp.src(coffeeDir + '/**/*.coffee') | |
.pipe( plugins.coffeelint() ) | |
.pipe( plugins.coffee({ bare: true }).on('error', plugins.util.log) ) | |
.pipe( plugins.plumber() ) | |
.pipe( gulp.dest(targetJsDir + '/lib') ) | |
.pipe( plugins.notify('Coffeescript libraries compiling Done!') ) | |
.pipe( plugins.livereload(server) ); | |
}); | |
gulp.task('browserify', function() { | |
return browserify({ | |
// Specify the entry point of your app | |
entries: ['./' + coffeeDir + '/main.coffee'], | |
// Add file extentions to make optional in your requires | |
extensions: ['.coffee', '.hbs'] | |
}) | |
// Enable source maps! | |
.bundle({debug: true}) | |
// Report compile errors | |
.on('error', plugins.util.log) | |
// Use vinyl-source-stream to make the | |
// stream gulp compatible. Specifiy the | |
// desired output filename here. | |
.pipe(source('owak.js')) | |
// Specify the output destination | |
.pipe(gulp.dest(targetJsDir)) | |
.pipe( plugins.notify('Scripts Compiled!') ) | |
.pipe( plugins.livereload(server) ); | |
}); | |
/* Bower libraries concatenation */ | |
gulp.task('bower', function() { | |
return gulp.src(bowerFiles(), { base: 'vendor' }) | |
.pipe(plugins.filter('**/*.js', '!**/*.min.js')) | |
.pipe(plugins.concat('vendor.js')) | |
.pipe(gulp.dest(targetJsDir)); | |
}); | |
/* Blade Templates */ | |
gulp.task('twig', function() { | |
return gulp.src(twigViewsDir + '/**/*.twig') | |
.pipe( plugins.livereload(server) ); | |
}); | |
/* Watcher */ | |
gulp.task('watch', function() { | |
global.isWatching = true; | |
server.listen(35729, function(err) { | |
if(err) {console.log(err);} | |
}); | |
gulp.watch(twigViewsDir + '/**/*.twig', ['twig']); | |
gulp.watch(sassDir + '/**/*.scss', ['sass']); | |
gulp.watch(coffeeDir + '/**/*.coffee', ['browserify', 'coffeelibs']); | |
}); | |
/* Default Task */ | |
gulp.task('default', ['sass', 'browserify', 'coffeelibs', 'bower', 'twig' ,'watch']); |
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
{ | |
"name": "owak-theme-assets", | |
"version": "0.0.0", | |
"description": "assets source files for the assets used in the OWAK Studios wordpress theme", | |
"author": "Androide Osorio", | |
"license": "ISC", | |
"browserify": { | |
"transform": ["coffeeify", "hbsfy" ] | |
}, | |
"devDependencies": { | |
"browserify": "^4.2.1", | |
"browserify-shim": "^3.6.0", | |
"coffeeify": "^0.6.0", | |
"gulp": "^3.6.2", | |
"gulp-autoprefixer": "0.0.7", | |
"gulp-bower-files": "^0.2.2", | |
"gulp-cache": "^0.1.3", | |
"gulp-coffee": "^1.4.2", | |
"gulp-coffeelint": "^0.3.2", | |
"gulp-concat": "^2.2.0", | |
"gulp-filter": "^0.4.1", | |
"gulp-jade": "^0.5.0", | |
"gulp-jshint": "^1.5.5", | |
"gulp-livereload": "^1.3.1", | |
"gulp-load-plugins": "^0.5.0", | |
"gulp-minify-css": "^0.3.4", | |
"gulp-notify": "^1.2.5", | |
"gulp-phpunit": "^0.5.1", | |
"gulp-plumber": "^0.6.1", | |
"gulp-rename": "^1.2.0", | |
"gulp-ruby-sass": "^0.4.3", | |
"gulp-util": "^2.2.14", | |
"handlebars": "^1.3.0", | |
"hbsfy": "^1.3.2", | |
"node-fs": "^0.1.7", | |
"tiny-lr": "0.0.7", | |
"vinyl-source-stream": "^0.1.1", | |
"watchify": "^0.10.2", | |
"main-bower-files": "^1.0.0" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment