Created
October 31, 2018 09:33
-
-
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)
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
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