Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dcardosods/0fcb29a74d04e37285b357da260e94e3 to your computer and use it in GitHub Desktop.
Save dcardosods/0fcb29a74d04e37285b357da260e94e3 to your computer and use it in GitHub Desktop.
Replace wiredep with mainBowerFiles+inject for injecting dependencies in the html (https://github.com/dcardosods/gulp-angular-bower-to-npm/commit/317613f3bc7c325c593bf495984b7e532c48dd8b.diff)
diff --git a/gulp/inject.js b/gulp/inject.js
index 2a5804b..37584ba 100644
--- a/gulp/inject.js
+++ b/gulp/inject.js
@@ -4,9 +4,10 @@ var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
-var $ = require('gulp-load-plugins')();
+var $ = require('gulp-load-plugins')({
+ pattern: ['gulp-*', 'main-bower-files']
+});
-var wiredep = require('wiredep').stream;
var _ = require('lodash');
var browserSync = require('browser-sync');
@@ -21,6 +22,13 @@ gulp.task('inject', ['scripts', 'styles'], function () {
path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
], { read: false });
+ var injectNpm = gulp.src($.mainBowerFiles({
+ paths: {
+ bowerDirectory: 'node_modules',
+ bowerJson: 'package.json'
+ }
+ }), {read: false});
+
var injectScripts = gulp.src([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js'),
@@ -35,8 +43,8 @@ gulp.task('inject', ['scripts', 'styles'], function () {
};
return gulp.src(path.join(conf.paths.src, '/*.html'))
+ .pipe($.inject(injectNpm, {name: 'npm'}))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
- .pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});
diff --git a/gulp/server.js b/gulp/server.js
index 500b0c0..b897813 100644
--- a/gulp/server.js
+++ b/gulp/server.js
@@ -17,7 +17,7 @@ function browserSyncInit(baseDir, browser) {
var routes = null;
if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
routes = {
- '/bower_components': 'bower_components'
+ '/node_modules': 'node_modules'
};
}
diff --git a/gulp/styles.js b/gulp/styles.js
index 36362dc..279ff3e 100644
--- a/gulp/styles.js
+++ b/gulp/styles.js
@@ -6,9 +6,10 @@ var conf = require('./conf');
var browserSync = require('browser-sync');
-var $ = require('gulp-load-plugins')();
+var $ = require('gulp-load-plugins')({
+ pattern: ['gulp-*', 'main-bower-files']
+});
-var wiredep = require('wiredep').stream;
var _ = require('lodash');
gulp.task('styles-reload', ['styles'], function() {
@@ -23,12 +24,30 @@ gulp.task('styles', function() {
var buildStyles = function() {
var lessOptions = {
paths: [
- 'bower_components',
+ 'node_modules',
path.join(conf.paths.src, '/app')
],
relativeUrls : true
};
+ var injectNpm = gulp.src($.mainBowerFiles({
+ paths: {
+ bowerDirectory: 'node_modules',
+ bowerJson: 'package.json',
+ },
+ filter: /\.less$/
+ }), {read: false});
+
+ var injectNpmOptions = {
+ transform: function (filePath) {
+ filePath = '../../' + filePath;
+ return '@import "' + filePath + '";';
+ },
+ starttag: '// npminjector',
+ endtag: '// endnpminjector',
+ addRootSlash: false
+ };
+
var injectFiles = gulp.src([
path.join(conf.paths.src, '/app/**/*.less'),
path.join('!' + conf.paths.src, '/app/index.less')
@@ -48,8 +67,8 @@ var buildStyles = function() {
return gulp.src([
path.join(conf.paths.src, '/app/index.less')
])
+ .pipe($.inject(injectNpm, injectNpmOptions))
.pipe($.inject(injectFiles, injectOptions))
- .pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe($.sourcemaps.init())
.pipe($.less(lessOptions)).on('error', conf.errorHandler('Less'))
.pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
diff --git a/src/app/index.less b/src/app/index.less
index 3436749..323f561 100644
--- a/src/app/index.less
+++ b/src/app/index.less
@@ -1,13 +1,13 @@
/**
- * Do not remove the comments below. It's the markers used by wiredep to inject
- * less dependencies when defined in the bower.json of your dependencies
+ * Do not remove the comments below. It's the markers used by to inject
+ * less dependencies when defined in the package.json of your dependencies
*/
-// bower:less
-// endbower
+// npminjector
+// endnpminjector
/**
* If you want to override some bootstrap variables, you have to change values here.
- * The list of variables are listed here bower_components/bootstrap/less/variables.less
+ * The list of variables are listed here node_modules/bootstrap/less/variables.less
*/
@navbar-inverse-link-color: #5AADBB;
@icon-font-path: '../../bootstrap/fonts/';
diff --git a/src/index.html b/src/index.html
index b86f455..87ddafd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,9 +8,9 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
- <!-- bower:css -->
- <!-- run `gulp inject` to automatically populate bower styles dependencies -->
- <!-- endbower -->
+ <!-- npm:css -->
+ <!-- run `gulp inject` to automatically populate npm styles dependencies -->
+ <!-- endinject -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
@@ -27,9 +27,9 @@
<div ui-view></div>
<!-- build:js(src) scripts/vendor.js -->
- <!-- bower:js -->
- <!-- run `gulp inject` to automatically populate bower script dependencies -->
- <!-- endbower -->
+ <!-- npm:js -->
+ <!-- run `gulp inject` to automatically populate npm script dependencies -->
+ <!-- endinject -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment