style injection of both deps and sources

Swiip · Apr 2, 2015 · f08778d · f08778d
1 parent 75de994
commit f08778d
Show file tree

Hide file tree

Showing 33 changed files with 131 additions and 82 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'\]/);
-  });
-
 });