Last active
August 29, 2015 14:00
-
-
Save xmlking/11358026 to your computer and use it in GitHub Desktop.
Angular Gulp workflow with SASS and Traceur for ES6 -> ES5
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": "MyApp", | |
"version": "0.0.1", | |
"private": true, | |
"main": "app/index.html", | |
"dependencies": { | |
"jquery": "jquery/jquery", | |
"angular": "1.3.0-beta.5", | |
"es6-shim": ">=0.8.0", | |
"bootstrap-sass-official": "~3.1.1", | |
"restangular": "~1.3.1", | |
"lodash": "2.4.1", | |
"angular-growl": "~0.4.0", | |
"angular-ui-router": "~0.2.10", | |
"angular-http-auth": "master", | |
"angular-animate": "1.3.0-beta.5", | |
"animate.css": "~3.1.0", | |
"angular-sanitize": "1.3.0-beta.5", | |
"angular-bootstrap": ">=0.10.0", | |
"angular-translate": ">=2.1.0", | |
"angular-translate-loader-partial": "~0.3.0", | |
"angular-xeditable": ">=0.1.8", | |
"angular-cache": "~3.0.0", | |
"ng-table": "~0.3.1", | |
"ng-table-export": "*", | |
"css-spinners": "~1.0.1", | |
"traceur-runtime": "~0.0.33", | |
"requirejs": "~2.1.11", | |
"requirejs-text": "~2.0.12", | |
"angular-assert": "angular/assert", | |
"angular-di": "angular/di.js", | |
"angular-diary": "angular/diary.js", | |
"bourbon": "~4.0.1" | |
}, | |
"devDependencies": { | |
"angular-mocks": "1.3.0-beta.5", | |
"angular-scenario": "1.3.0-beta.5", | |
"holderjs": "~2.3.2" | |
}, | |
"overrides": { | |
"angular-assert": { | |
"main": "dist/assert.js" | |
}, | |
"angular-di": { | |
"main": "dist/index.js" | |
}, | |
"angular-diary": { | |
"main": "dist/diary.js" | |
}, | |
"requirejs-text": { | |
"main": "text.js" | |
} | |
} | |
} |
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'; | |
// generated on 2014-04-23 using generator-gulp-webapp 0.0.8 | |
var gulp = require('gulp'); | |
var tPipe = require('pipe/gulp'); | |
var traceur = require('gulp-traceur'); | |
// load plugins | |
var $ = require('gulp-load-plugins')(); | |
gulp.task('styles', function () { | |
return gulp.src('app/styles/**/*.scss') | |
.pipe($.rubySass({ | |
style: 'expanded', | |
sourcemap: true | |
})) | |
.pipe($.autoprefixer('last 1 version')) | |
.pipe(gulp.dest('.tmp/styles')) | |
.pipe($.size()); | |
}); | |
gulp.task('scripts', function () { | |
return gulp.src('app/scripts/**/*.js') | |
// .pipe($.jshint()) //TODO : enable when jshint understands ES6 annotations. | |
// .pipe($.jshint.reporter($.jshintStylish)) | |
// .pipe($.size()) | |
.pipe(traceur(tPipe.traceur({experimental: true, sourceMap: true}))) | |
.pipe(gulp.dest('.tmp/compiled')); | |
}); | |
gulp.task('build-di-amd', function() { | |
return gulp.src('app/bower_components/angular-di/src/**/*.js') | |
.pipe(traceur(tPipe.traceur())) | |
.pipe(gulp.dest('app/bower_components/angular-di/dist/amd')); | |
}); | |
gulp.task('build-di-cjs', function() { | |
return gulp.src('app/bower_components/angular-di/src/**/*.js') | |
.pipe(traceur(tPipe.traceur({modules: 'commonjs'}))) | |
.pipe(gulp.dest('app/bower_components/angular-di/dist/cjs')); | |
}); | |
gulp.task('build-diary-amd', function() { | |
return gulp.src('app/bower_components/angular-diary/src/**/*.js') | |
.pipe(traceur(tPipe.traceur())) | |
.pipe(gulp.dest('app/bower_components/angular-diary/dist/amd')); | |
}); | |
gulp.task('build-assert-amd', function() { | |
return gulp.src('app/bower_components/angular-assert/src/**/*.js') | |
.pipe(traceur(tPipe.traceur())) | |
.pipe(gulp.dest('app/bower_components/angular-assert/dist/amd')); | |
}); | |
gulp.task('html', ['styles', 'scripts'], function () { | |
var jsFilter = $.filter('**/*.js'); | |
var cssFilter = $.filter('**/*.css'); | |
return gulp.src('app/*.html') | |
.pipe($.useref.assets()) | |
.pipe(jsFilter) | |
.pipe($.uglify()) | |
.pipe(jsFilter.restore()) | |
.pipe(cssFilter) | |
.pipe($.csso()) | |
.pipe(cssFilter.restore()) | |
.pipe($.useref.restore()) | |
.pipe($.useref()) | |
.pipe(gulp.dest('dist')) | |
.pipe($.size()); | |
}); | |
gulp.task('images', function () { | |
return gulp.src('app/images/**/*') | |
.pipe($.cache($.imagemin({ | |
optimizationLevel: 3, | |
progressive: true, | |
interlaced: true | |
}))) | |
.pipe(gulp.dest('dist/images')) | |
.pipe($.size()); | |
}); | |
gulp.task('fonts', function () { | |
return $.bowerFiles() | |
.pipe($.filter('**/*.{eot,svg,ttf,woff}')) | |
.pipe($.flatten()) | |
.pipe(gulp.dest('dist/fonts')) | |
.pipe($.size()); | |
}); | |
gulp.task('clean', function () { | |
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean()); | |
}); | |
gulp.task('build', ['html', 'images', 'fonts']); | |
gulp.task('build-deps', ['build-di-amd', 'build-diary-amd', 'build-assert-amd']); | |
gulp.task('default', ['clean'], function () { | |
gulp.start('build'); | |
}); | |
gulp.task('connect', function () { | |
var connect = require('connect'); | |
var app = connect() | |
.use(require('connect-livereload')({ port: 35729 })) | |
.use(connect.static('app')) | |
.use(connect.static('.tmp')) | |
.use(connect.directory('app')); | |
require('http').createServer(app) | |
.listen(9000) | |
.on('listening', function () { | |
console.log('Started connect web server on http://localhost:9000'); | |
}); | |
}); | |
gulp.task('serve', ['connect'], function () { | |
require('opn')('http://localhost:9000'); | |
}); | |
// inject bower components | |
gulp.task('wiredep', function () { | |
var wiredep = require('wiredep').stream; | |
gulp.src('app/styles/*.scss') | |
.pipe(wiredep({ | |
directory: 'app/bower_components' | |
})) | |
.pipe(gulp.dest('app/styles')); | |
gulp.src('app/*.html') | |
.pipe(wiredep({ | |
directory: 'app/bower_components', | |
exclude: ['bootstrap-sass-official'] | |
})) | |
.pipe(gulp.dest('app')); | |
}); | |
gulp.task('watch', ['connect', 'serve'], function () { | |
var server = $.livereload(); | |
function changed (file) { | |
console.log('[changed] '+file.path); | |
} // changed | |
// watch for changes | |
gulp.watch([ | |
'app/*.html', | |
'.tmp/styles/**/*.css', | |
'app/scripts/**/*.js', | |
'app/images/**/*' | |
]).on('change', function (file) { | |
server.changed(file.path); | |
}); | |
gulp.watch('app/styles/**/*.scss', ['styles']).on('change', changed); | |
gulp.watch('app/scripts/**/*.js', ['scripts']).on('change', changed); | |
gulp.watch('app/images/**/*', ['images']); | |
gulp.watch('bower.json', ['wiredep']); | |
}); |
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": "MyApp", | |
"version": "0.0.1", | |
"dependencies": {}, | |
"devDependencies": { | |
"connect": "^2.14.4", | |
"connect-livereload": "^0.4.0", | |
"gulp": "~3.6.0", | |
"gulp-autoprefixer": "^0.0.6", | |
"gulp-bower-files": "^0.2.1", | |
"gulp-cache": "^0.1.1", | |
"gulp-clean": "^0.2.4", | |
"gulp-csso": "^0.2.6", | |
"gulp-filter": "^0.4.1", | |
"gulp-flatten": "^0.0.2", | |
"gulp-imagemin": "^0.2.0", | |
"gulp-jshint": "^1.5.3", | |
"gulp-livereload": "^1.2.0", | |
"gulp-load-plugins": "^0.5.0", | |
"gulp-ruby-sass": "^0.4.3", | |
"gulp-size": "^0.3.0", | |
"gulp-uglify": "^0.2.1", | |
"gulp-useref": "^0.3.1", | |
"jshint-stylish": "^0.1.5", | |
"opn": "^0.1.1", | |
"wiredep": "^1.4.3", | |
"traceur": "^0.0.33", | |
"gulp-traceur": "vojtajina/gulp-traceur#traceur-as-peer", | |
"pipe": "angular/pipe#remove-transitive-deps" | |
}, | |
"engines": { | |
"node": ">=0.10.0" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment