From f08778d8675969b9223c5a4009cd4a7fa45f2401 Mon Sep 17 00:00:00 2001 From: Matthieu Lux Date: Thu, 2 Apr 2015 18:07:59 +0200 Subject: [PATCH] style injection of both deps and sources --- app/src/ui.js | 2 +- app/templates/_gulpfile.js | 7 +++- app/templates/gulp/_inject.js | 11 ++---- app/templates/gulp/_styles.js | 36 +++++++++++-------- app/templates/gulp/_unit-tests.js | 7 ++-- .../__angular-material-index.less | 5 +++ .../__angular-material-index.scss | 5 +++ .../__angular-material-index.styl | 5 +++ .../__angular-material-vendor.less | 4 +-- .../__angular-material-vendor.scss | 4 +-- .../__angular-material-vendor.styl | 4 +-- .../src/app/_bootstrap/__bootstrap-index.less | 5 +++ .../src/app/_bootstrap/__bootstrap-index.scss | 5 +++ .../src/app/_bootstrap/__bootstrap-index.styl | 5 +++ .../app/_bootstrap/__bootstrap-vendor.less | 10 +++--- .../app/_bootstrap/__bootstrap-vendor.scss | 6 ++-- .../app/_bootstrap/__bootstrap-vendor.styl | 4 +-- .../app/_foundation/__foundation-index.less | 5 +++ .../app/_foundation/__foundation-index.scss | 5 +++ .../app/_foundation/__foundation-index.styl | 5 +++ .../app/_foundation/__foundation-vendor.less | 4 +-- .../app/_foundation/__foundation-vendor.scss | 6 ++-- .../app/_foundation/__foundation-vendor.styl | 4 +-- app/templates/src/app/_none/__none-index.less | 5 +++ app/templates/src/app/_none/__none-index.scss | 5 +++ app/templates/src/app/_none/__none-index.styl | 5 +++ .../src/app/_none/__none-vendor.less | 4 +-- .../src/app/_none/__none-vendor.scss | 4 +-- .../src/app/_none/__none-vendor.styl | 4 +-- test/node/test-ui.js | 2 +- test/template/test-gulpfile.js | 10 ++++++ test/template/test-inject.js | 10 ------ test/template/test-unit-tests.js | 10 ------ 33 files changed, 131 insertions(+), 82 deletions(-) diff --git a/app/src/ui.js b/app/src/ui.js index 613fcd55..e7c5188f 100644 --- a/app/src/ui.js +++ b/app/src/ui.js @@ -80,7 +80,7 @@ module.exports = function(GulpAngularGenerator) { if (this.props.ui.key === 'bootstrap') { if(this.props.bootstrapComponents.key !== 'official') { if(this.props.cssPreprocessor.extension === 'scss') { - this.wiredepExclusions.push('/bootstrap-sass-official/'); + this.wiredepExclusions.push('/bootstrap-sass-official\\/.*\\.js/'); } else { this.wiredepExclusions.push('/bootstrap\\.js/'); } diff --git a/app/templates/_gulpfile.js b/app/templates/_gulpfile.js index b599fedd..f47bbabc 100644 --- a/app/templates/_gulpfile.js +++ b/app/templates/_gulpfile.js @@ -2,7 +2,6 @@ var gulp = require('gulp'); var gutil = require('gulp-util'); -var _ = require('lodash'); var wrench = require('wrench'); var options = { @@ -15,6 +14,12 @@ var options = { gutil.log(gutil.colors.red('[' + title + ']'), err.toString()); this.emit('end'); }; + }, + wiredep: { + directory: 'bower_components' +<% if(wiredepExclusions.length > 0) { %>, + exclude: [<%= wiredepExclusions.join(', ') %>] +<% } %> } }; diff --git a/app/templates/gulp/_inject.js b/app/templates/gulp/_inject.js index a7707660..a081ccf9 100644 --- a/app/templates/gulp/_inject.js +++ b/app/templates/gulp/_inject.js @@ -19,8 +19,8 @@ module.exports = function(options) { options.src + '/app/**/*.css' ], { read: false }); <% } %> - <% if (props.jsPreprocessor.key === 'typescript') { %> + var sortOutput = require('../' + options.tmp + '/sortOutput.json'); <% } %> @@ -49,17 +49,10 @@ module.exports = function(options) { addRootSlash: false }; - var wiredepOptions = { - directory: 'bower_components' -<% if(wiredepExclusions.length > 0) { %>, - exclude: [<%= wiredepExclusions.join(', ') %>] -<% } %> - }; - return gulp.src(options.src + '/*.html') .pipe($.inject(injectStyles, injectOptions)) .pipe($.inject(injectScripts, injectOptions)) - .pipe(wiredep(wiredepOptions)) + .pipe(wiredep(options.wiredep)) .pipe(gulp.dest(options.tmp + '/serve')); }); diff --git a/app/templates/gulp/_styles.js b/app/templates/gulp/_styles.js index a6e8271a..899b127a 100644 --- a/app/templates/gulp/_styles.js +++ b/app/templates/gulp/_styles.js @@ -5,6 +5,8 @@ var browserSync = require('browser-sync'); var $ = require('gulp-load-plugins')(); +var wiredep = require('wiredep').stream; + module.exports = function(options) { gulp.task('styles', function () { <% if (props.cssPreprocessor.key === 'less') { %> @@ -37,6 +39,7 @@ module.exports = function(options) { }; var indexFilter = $.filter('index.<%= props.cssPreprocessor.extension %>'); + var vendorFilter = $.filter('vendor.<%= props.cssPreprocessor.extension %>'); <% if (props.cssPreprocessor.key === 'ruby-sass') { %> var cssFilter = $.filter('**/*.css'); <% } %> @@ -45,28 +48,31 @@ module.exports = function(options) { options.src + '/app/index.<%= props.cssPreprocessor.extension %>', options.src + '/app/vendor.<%= props.cssPreprocessor.extension %>' ]) - .pipe(indexFilter) - .pipe($.inject(injectFiles, injectOptions)) - .pipe(indexFilter.restore()) + .pipe(indexFilter) + .pipe($.inject(injectFiles, injectOptions)) + .pipe(indexFilter.restore()) + .pipe(vendorFilter) + .pipe(wiredep(options.wiredep)) + .pipe(vendorFilter.restore()) <% if (props.cssPreprocessor.key === 'ruby-sass') { %> - .pipe($.rubySass(sassOptions)).on('error', options.errorHandler('RubySass')) - .pipe(cssFilter) - .pipe($.sourcemaps.init({ loadMaps: true })) + .pipe($.rubySass(sassOptions)).on('error', options.errorHandler('RubySass')) + .pipe(cssFilter) + .pipe($.sourcemaps.init({ loadMaps: true })) <% } else { %> - .pipe($.sourcemaps.init()) + .pipe($.sourcemaps.init()) <% } if (props.cssPreprocessor.key === 'less') { %> - .pipe($.less(lessOptions)).on('error', options.errorHandler('Less')) + .pipe($.less(lessOptions)).on('error', options.errorHandler('Less')) <% } else if (props.cssPreprocessor.key === 'node-sass') { %> - .pipe($.sass(sassOptions)).on('error', options.errorHandler('Sass')) + .pipe($.sass(sassOptions)).on('error', options.errorHandler('Sass')) <% } else if (props.cssPreprocessor.key === 'stylus') { %> - .pipe($.stylus()).on('error', options.errorHandler('Stylus')) + .pipe($.stylus()).on('error', options.errorHandler('Stylus')) <% } %> - .pipe($.autoprefixer()).on('error', options.errorHandler('Autoprefixer')) - .pipe($.sourcemaps.write()) + .pipe($.autoprefixer()).on('error', options.errorHandler('Autoprefixer')) + .pipe($.sourcemaps.write()) <% if (props.cssPreprocessor.key === 'ruby-sass') { %> - .pipe(cssFilter.restore()) + .pipe(cssFilter.restore()) <% } %> - .pipe(gulp.dest(options.tmp + '/serve/app/')) - .pipe(browserSync.reload({ stream: true })); + .pipe(gulp.dest(options.tmp + '/serve/app/')) + .pipe(browserSync.reload({ stream: true })); }); }; diff --git a/app/templates/gulp/_unit-tests.js b/app/templates/gulp/_unit-tests.js index a4a73d56..6f6c91a7 100644 --- a/app/templates/gulp/_unit-tests.js +++ b/app/templates/gulp/_unit-tests.js @@ -11,14 +11,11 @@ var _ = require('lodash'); module.exports = function(options) { function listFiles(callback) { - var bowerDeps = wiredep({ - directory: 'bower_components', -<% if(wiredepExclusions.length > 0) { %> - exclude: [<%= wiredepExclusions.join(', ') %>], -<% } %> + var wiredepOptions = _.extend({}, options.wiredep, { dependencies: true, devDependencies: true }); + var bowerDeps = wiredep(wiredepOptions); var specFiles = [ options.src + '/**/*.spec.js', diff --git a/app/templates/src/app/_angular-material/__angular-material-index.less b/app/templates/src/app/_angular-material/__angular-material-index.less index c5d26eaa..d5a0d605 100644 --- a/app/templates/src/app/_angular-material/__angular-material-index.less +++ b/app/templates/src/app/_angular-material/__angular-material-index.less @@ -53,3 +53,8 @@ section.jumbotron { } } } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your less files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_angular-material/__angular-material-index.scss b/app/templates/src/app/_angular-material/__angular-material-index.scss index c5d26eaa..bd1edb3a 100644 --- a/app/templates/src/app/_angular-material/__angular-material-index.scss +++ b/app/templates/src/app/_angular-material/__angular-material-index.scss @@ -53,3 +53,8 @@ section.jumbotron { } } } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your sass files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_angular-material/__angular-material-index.styl b/app/templates/src/app/_angular-material/__angular-material-index.styl index dc4671e3..72c794ac 100644 --- a/app/templates/src/app/_angular-material/__angular-material-index.styl +++ b/app/templates/src/app/_angular-material/__angular-material-index.styl @@ -41,3 +41,8 @@ section &.pull-right float right width 50px + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your stylus files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_angular-material/__angular-material-vendor.less b/app/templates/src/app/_angular-material/__angular-material-vendor.less index a385b09d..3f3b40e1 100644 --- a/app/templates/src/app/_angular-material/__angular-material-vendor.less +++ b/app/templates/src/app/_angular-material/__angular-material-vendor.less @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject less dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:less +// endbower diff --git a/app/templates/src/app/_angular-material/__angular-material-vendor.scss b/app/templates/src/app/_angular-material/__angular-material-vendor.scss index a8fc9080..053b0f09 100644 --- a/app/templates/src/app/_angular-material/__angular-material-vendor.scss +++ b/app/templates/src/app/_angular-material/__angular-material-vendor.scss @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject sass dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:scss +// endbower diff --git a/app/templates/src/app/_angular-material/__angular-material-vendor.styl b/app/templates/src/app/_angular-material/__angular-material-vendor.styl index 6d9b74ef..fff90697 100644 --- a/app/templates/src/app/_angular-material/__angular-material-vendor.styl +++ b/app/templates/src/app/_angular-material/__angular-material-vendor.styl @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject stylus dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:styl +// endbower diff --git a/app/templates/src/app/_bootstrap/__bootstrap-index.less b/app/templates/src/app/_bootstrap/__bootstrap-index.less index 621b41db..75350b29 100644 --- a/app/templates/src/app/_bootstrap/__bootstrap-index.less +++ b/app/templates/src/app/_bootstrap/__bootstrap-index.less @@ -12,3 +12,8 @@ width: 50px; } } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your less files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_bootstrap/__bootstrap-index.scss b/app/templates/src/app/_bootstrap/__bootstrap-index.scss index 621b41db..4c58ef3f 100644 --- a/app/templates/src/app/_bootstrap/__bootstrap-index.scss +++ b/app/templates/src/app/_bootstrap/__bootstrap-index.scss @@ -12,3 +12,8 @@ width: 50px; } } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your sass files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_bootstrap/__bootstrap-index.styl b/app/templates/src/app/_bootstrap/__bootstrap-index.styl index b2ba0928..db6eec17 100644 --- a/app/templates/src/app/_bootstrap/__bootstrap-index.styl +++ b/app/templates/src/app/_bootstrap/__bootstrap-index.styl @@ -9,3 +9,8 @@ img.pull-right width 50px + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your stylus files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_bootstrap/__bootstrap-vendor.less b/app/templates/src/app/_bootstrap/__bootstrap-vendor.less index 30fd69f7..c69e9018 100644 --- a/app/templates/src/app/_bootstrap/__bootstrap-vendor.less +++ b/app/templates/src/app/_bootstrap/__bootstrap-vendor.less @@ -1,8 +1,6 @@ -@import '../<%= computedPaths.appToBower %>/bower_components/bootstrap/less/bootstrap.less'; - -@icon-font-path: '../<%= computedPaths.appToBower %>/bower_components/bootstrap/fonts/'; - /* Do not remove this comments bellow. It's the markers used by wiredep to inject less dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:less +// endbower + +@icon-font-path: '../<%= computedPaths.appToBower %>/bower_components/bootstrap/fonts/'; diff --git a/app/templates/src/app/_bootstrap/__bootstrap-vendor.scss b/app/templates/src/app/_bootstrap/__bootstrap-vendor.scss index a9e1c78d..b13b8eb0 100644 --- a/app/templates/src/app/_bootstrap/__bootstrap-vendor.scss +++ b/app/templates/src/app/_bootstrap/__bootstrap-vendor.scss @@ -1,8 +1,6 @@ $icon-font-path: "../<%= computedPaths.appToBower %>/bower_components/bootstrap-sass-official/assets/fonts/bootstrap/"; -@import '../<%= computedPaths.appToBower %>/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap'; - /* Do not remove this comments bellow. It's the markers used by wiredep to inject sass dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:scss +// endbower diff --git a/app/templates/src/app/_bootstrap/__bootstrap-vendor.styl b/app/templates/src/app/_bootstrap/__bootstrap-vendor.styl index 6d9b74ef..fff90697 100644 --- a/app/templates/src/app/_bootstrap/__bootstrap-vendor.styl +++ b/app/templates/src/app/_bootstrap/__bootstrap-vendor.styl @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject stylus dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:styl +// endbower diff --git a/app/templates/src/app/_foundation/__foundation-index.less b/app/templates/src/app/_foundation/__foundation-index.less index db894860..bf0f6dbd 100644 --- a/app/templates/src/app/_foundation/__foundation-index.less +++ b/app/templates/src/app/_foundation/__foundation-index.less @@ -17,3 +17,8 @@ width: 50px; } } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your less files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_foundation/__foundation-index.scss b/app/templates/src/app/_foundation/__foundation-index.scss index db894860..41472002 100644 --- a/app/templates/src/app/_foundation/__foundation-index.scss +++ b/app/templates/src/app/_foundation/__foundation-index.scss @@ -17,3 +17,8 @@ width: 50px; } } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your sass files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_foundation/__foundation-index.styl b/app/templates/src/app/_foundation/__foundation-index.styl index 8b46bcc9..53113c93 100644 --- a/app/templates/src/app/_foundation/__foundation-index.styl +++ b/app/templates/src/app/_foundation/__foundation-index.styl @@ -13,3 +13,8 @@ img.right width 50px + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your stylus files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_foundation/__foundation-vendor.less b/app/templates/src/app/_foundation/__foundation-vendor.less index a385b09d..3f3b40e1 100644 --- a/app/templates/src/app/_foundation/__foundation-vendor.less +++ b/app/templates/src/app/_foundation/__foundation-vendor.less @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject less dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:less +// endbower diff --git a/app/templates/src/app/_foundation/__foundation-vendor.scss b/app/templates/src/app/_foundation/__foundation-vendor.scss index 237d9a3b..a927510c 100644 --- a/app/templates/src/app/_foundation/__foundation-vendor.scss +++ b/app/templates/src/app/_foundation/__foundation-vendor.scss @@ -1,6 +1,8 @@ +/* The import of foundation is made manually because there is still no links of the + sass version in theit bower.json... */ @import '../<%= computedPaths.appToBower %>/bower_components/foundation/scss/foundation'; /* Do not remove this comments bellow. It's the markers used by wiredep to inject sass dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:scss +// endbower diff --git a/app/templates/src/app/_foundation/__foundation-vendor.styl b/app/templates/src/app/_foundation/__foundation-vendor.styl index 6d9b74ef..fff90697 100644 --- a/app/templates/src/app/_foundation/__foundation-vendor.styl +++ b/app/templates/src/app/_foundation/__foundation-vendor.styl @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject stylus dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:styl +// endbower diff --git a/app/templates/src/app/_none/__none-index.less b/app/templates/src/app/_none/__none-index.less index 11916b52..80214b4c 100644 --- a/app/templates/src/app/_none/__none-index.less +++ b/app/templates/src/app/_none/__none-index.less @@ -114,3 +114,8 @@ a { hr { clear: both; } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your less files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_none/__none-index.scss b/app/templates/src/app/_none/__none-index.scss index 11916b52..ec27a4e3 100644 --- a/app/templates/src/app/_none/__none-index.scss +++ b/app/templates/src/app/_none/__none-index.scss @@ -114,3 +114,8 @@ a { hr { clear: both; } + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your sass files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_none/__none-index.styl b/app/templates/src/app/_none/__none-index.styl index 2280d296..2239e60b 100644 --- a/app/templates/src/app/_none/__none-index.styl +++ b/app/templates/src/app/_none/__none-index.styl @@ -112,3 +112,8 @@ a hr clear both + +/* Do not remove this comments bellow. It's the markers used by gulp-inject to inject + all your stylus files automatically */ +// injector +// endinjector diff --git a/app/templates/src/app/_none/__none-vendor.less b/app/templates/src/app/_none/__none-vendor.less index a385b09d..3f3b40e1 100644 --- a/app/templates/src/app/_none/__none-vendor.less +++ b/app/templates/src/app/_none/__none-vendor.less @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject less dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:less +// endbower diff --git a/app/templates/src/app/_none/__none-vendor.scss b/app/templates/src/app/_none/__none-vendor.scss index a8fc9080..053b0f09 100644 --- a/app/templates/src/app/_none/__none-vendor.scss +++ b/app/templates/src/app/_none/__none-vendor.scss @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject sass dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:scss +// endbower diff --git a/app/templates/src/app/_none/__none-vendor.styl b/app/templates/src/app/_none/__none-vendor.styl index 6d9b74ef..fff90697 100644 --- a/app/templates/src/app/_none/__none-vendor.styl +++ b/app/templates/src/app/_none/__none-vendor.styl @@ -1,4 +1,4 @@ /* Do not remove this comments bellow. It's the markers used by wiredep to inject stylus dependencies when defined in the bower.json of your dependencies */ -// injector -// endinjector +// bower:styl +// endbower diff --git a/test/node/test-ui.js b/test/node/test-ui.js index 730fc79b..124b27a0 100644 --- a/test/node/test-ui.js +++ b/test/node/test-ui.js @@ -139,7 +139,7 @@ describe('gulp-angular generator ui script', function () { cssPreprocessor: { extension: 'scss' } }; generator.computeWiredepExclusions(); - generator.wiredepExclusions[0].should.be.equal('/bootstrap-sass-official/'); + generator.wiredepExclusions[0].should.be.equal('/bootstrap-sass-official\\/.*\\.js/'); generator.wiredepExclusions[1].should.be.equal('/bootstrap\\.css/'); }); diff --git a/test/template/test-gulpfile.js b/test/template/test-gulpfile.js index 5319a074..3df19f0e 100644 --- a/test/template/test-gulpfile.js +++ b/test/template/test-gulpfile.js @@ -35,4 +35,14 @@ describe('gulp-angular gulpfile template', function () { result.should.match(/e2e: 'test\/e2e\/dir'/); }); + it('should configure wiredep with wiredep exclusions', function() { + model.wiredepExclusions = []; + var result = gulpfile(model); + result.should.not.match(/exclude:/); + + model.wiredepExclusions = ['\'a\'', '\'b\'']; + result = gulpfile(model); + result.should.match(/exclude: \['a', 'b'\]/); + }); + }); diff --git a/test/template/test-inject.js b/test/template/test-inject.js index 8fb48396..94bd6638 100644 --- a/test/template/test-inject.js +++ b/test/template/test-inject.js @@ -77,14 +77,4 @@ describe('gulp-angular inject template', function () { result.should.not.match(/order/); }); - it('should configure wiredep with wiredep exclusions', function() { - model.wiredepExclusions = []; - var result = inject(model); - result.should.not.match(/exclude:/); - - model.wiredepExclusions = ['\'a\'', '\'b\'']; - result = inject(model); - result.should.match(/exclude: \['a', 'b'\]/); - }); - }); diff --git a/test/template/test-unit-tests.js b/test/template/test-unit-tests.js index 1095d49e..64e69538 100644 --- a/test/template/test-unit-tests.js +++ b/test/template/test-unit-tests.js @@ -23,16 +23,6 @@ describe('gulp-angular unit tests template', function () { model = mockModel(); }); - it('should configure wiredep with wiredep exclusions', function() { - model.wiredepExclusions = []; - var result = unitTests(model); - result.should.not.match(/exclude:/); - - model.wiredepExclusions = ['\'a\'', '\'b\'']; - result = unitTests(model); - result.should.match(/exclude: \['a', 'b'\]/); - }); - it('should add options for each css preprocessors', function() { model.props.jsPreprocessor.key = 'none'; var result = unitTests(model);