I am trying to inject ngmap to my jhipster project. After installation dependency with
bower install ngmap --save
it appears in my bower.json file :
{
"version": "0.0.0",
"name": "myApp",
"appPath": "src/main/webapp/",
"testPath": "src/test/javascript/spec",
"dependencies": {
"angular": "1.5.8",
"angular-aria": "1.5.8",
"angular-bootstrap": "1.3.3",
"angular-cache-buster": "0.4.3",
"angular-cookies": "1.5.8",
"angular-dynamic-locale": "0.1.32",
"angular-i18n": "1.5.8",
"ngstorage": "0.3.10",
"angular-loading-bar": "0.9.0",
"angular-resource": "1.5.8",
"angular-sanitize": "1.5.8",
"angular-translate": "2.11.1",
"angular-translate-interpolation-messageformat": "2.11.1",
"angular-translate-loader-partial": "2.11.1",
"angular-translate-storage-cookie": "2.11.1",
"angular-ui-router": "0.3.1",
"bootstrap-sass": "3.3.7",
"bootstrap-ui-datetime-picker": "2.4.3",
"jquery": "3.1.0",
"json3": "3.3.2",
"messageformat": "0.3.1",
"modernizr": "3.3.1",
"ng-file-upload": "12.0.4",
"ngInfiniteScroll": "1.3.0",
"swagger-ui": "2.1.5",
"arrive": "2.3.0",
"bootstrap-material-design": "0.5.10",
"ngmap": "^1.17.8"
},
"devDependencies": {
"angular-mocks": "1.5.8"
},
"overrides": {
"angular": {
"dependencies": {
"jquery": "3.1.0"
}
},
"angular-cache-buster": {
"dependencies": {
"angular": "1.5.8"
}
},
"angular-dynamic-locale": {
"dependencies": {
"angular": "1.5.8"
}
},
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss"
]
}
},
"resolutions": {
"angular": "1.5.8",
"angular-bootstrap": "2.0.0",
"jquery": "3.1.0"
}
}
Gulp injects ngmap BEFORE angular dependency:
<script src="bower_components/ngmap/build/scripts/ng-map.js"></script>
<script src="bower_components/angular/angular.js"></script>
what occurs with error :
ng-map.js:34 Uncaught TypeError: Cannot read property 'module' of undefined
app.module.js:4 Uncaught ReferenceError: angular is not defined(…)
I've injected js file to the index.html manually, on the end of the file. It works locally, on my development environment, but after deploy to heroku, the same error as above occurs. How can I force gulp to inject it in right order?
It's my gulpfile.js:
// Generated on 2016-10-20 using generator-jhipster 3.9.1
'use strict';
var gulp = require('gulp'),
expect = require('gulp-expect-file'),
es = require('event-stream'),
flatten = require('gulp-flatten'),
sass = require('gulp-sass'),
rev = require('gulp-rev'),
templateCache = require('gulp-angular-templatecache'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
ngConstant = require('gulp-ng-constant'),
rename = require('gulp-rename'),
eslint = require('gulp-eslint'),
del = require('del'),
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
KarmaServer = require('karma').Server,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
gulpIf = require('gulp-if');
var handleErrors = require('./gulp/handle-errors'),
serve = require('./gulp/serve'),
util = require('./gulp/utils'),
copy = require('./gulp/copy'),
inject = require('./gulp/inject'),
build = require('./gulp/build');
var config = require('./gulp/config');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('copy', ['copy:i18n', 'copy:fonts', 'copy:common']);
gulp.task('copy:i18n', copy.i18n);
gulp.task('copy:languages', copy.languages);
gulp.task('copy:fonts', copy.fonts);
gulp.task('copy:common', copy.common);
gulp.task('copy:swagger', copy.swagger);
gulp.task('copy:images', copy.images);
gulp.task('images', function () {
return gulp.src(config.app + 'content/images/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/images'))
.pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/images'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('sass', function () {
return es.merge(
gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(expect(config.sassSrc))
.pipe(changed(config.cssDir, {extension: '.css'}))
.pipe(sass({includePaths:config.bower}).on('error', sass.logError))
.pipe(gulp.dest(config.cssDir)),
gulp.src(config.bower + '**/fonts/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.app + 'content/fonts'))
.pipe(flatten())
.pipe(gulp.dest(config.app + 'content/fonts'))
);
});
gulp.task('styles', ['sass'], function () {
return gulp.src(config.app + 'content/css')
.pipe(browserSync.reload({stream: true}));
});
gulp.task('inject', function() {
runSequence('inject:dep', 'inject:app');
});
gulp.task('inject:dep', ['inject:test', 'inject:vendor']);
gulp.task('inject:app', inject.app);
gulp.task('inject:vendor', inject.vendor);
gulp.task('inject:test', inject.test);
gulp.task('inject:troubleshoot', inject.troubleshoot);
gulp.task('assets:prod', ['images', 'styles', 'html', 'copy:swagger', 'copy:images'], build);
gulp.task('html', function () {
return gulp.src(config.app + 'app/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache({
module: 'myApp',
root: 'app/',
moduleSystem: 'IIFE'
}))
.pipe(gulp.dest(config.tmp));
});
gulp.task('ngconstant:dev', function () {
return ngConstant({
name: 'myApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: true
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
gulp.task('ngconstant:prod', function () {
return ngConstant({
name: 'myApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: false
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
// check app for eslint errors
gulp.task('eslint', function () {
return gulp.src(['gulpfile.js', config.app + 'app/**/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failOnError());
});
// check app for eslint errors anf fix some of them
gulp.task('eslint:fix', function () {
return gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint({
fix: true
}))
.pipe(eslint.format())
.pipe(gulpIf(util.isLintFixed, gulp.dest(config.app + 'app')));
});
gulp.task('test', ['inject:test', 'ngconstant:dev'], function (done) {
new KarmaServer({
configFile: __dirname + '/' + config.test + 'karma.conf.js',
singleRun: true
}, done).start();
});
gulp.task('watch', function () {
gulp.watch('bower.json', ['install']);
gulp.watch(['gulpfile.js', 'pom.xml'], ['ngconstant:dev']);
gulp.watch(config.sassSrc, ['styles']);
gulp.watch(config.app + 'content/images/**', ['images']);
gulp.watch(config.app + 'app/**/*.js', ['inject:app']);
gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});
gulp.task('install', function () {
runSequence(['inject:dep', 'ngconstant:dev'], 'sass', 'copy:languages', 'inject:app', 'inject:troubleshoot');
});
gulp.task('serve', ['install'], serve);
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'inject:vendor', 'ngconstant:prod', 'copy:languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});
gulp.task('default', ['serve']);
inject.js :
'use strict';
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
inject = require('gulp-inject'),
es = require('event-stream'),
naturalSort = require('gulp-natural-sort'),
angularFilesort = require('gulp-angular-filesort'),
bowerFiles = require('main-bower-files');
var handleErrors = require('./handle-errors');
var config = require('./config');
module.exports = {
app: app,
vendor: vendor,
test: test,
troubleshoot: troubleshoot
}
function app() {
return gulp.src(config.app + 'index.html')
.pipe(inject(gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(naturalSort())
.pipe(angularFilesort()), {relative: true}))
.pipe(gulp.dest(config.app));
}
function vendor() {
var stream = gulp.src(config.app + 'index.html')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(inject(gulp.src(bowerFiles(), {read: false}), {
name: 'bower',
relative: true
}))
.pipe(gulp.dest(config.app));
return es.merge(stream, gulp.src(config.sassVendor)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(inject(gulp.src(bowerFiles({filter:['**/*.{scss,sass}']}), {read: false}), {
name: 'bower',
relative: true
}))
.pipe(gulp.dest(config.scss)));
}
function test() {
return gulp.src(config.test + 'karma.conf.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(inject(gulp.src(bowerFiles({includeDev: true, filter: ['**/*.js']}), {read: false}), {
starttag: '// bower:js',
endtag: '// endbower',
transform: function (filepath) {
return '\'' + filepath.substring(1, filepath.length) + '\',';
}
}))
.pipe(gulp.dest(config.test));
}
function troubleshoot() {
/* this task removes the troubleshooting content from index.html*/
return gulp.src(config.app + 'index.html')
.pipe(plumber({errorHandler: handleErrors}))
/* having empty src as we dont have to read any files*/
.pipe(inject(gulp.src('', {read: false}), {
starttag: '<!-- inject:troubleshoot -->',
removeTags: true,
transform: function () {
return '<!-- Angular views -->';
}
}))
.pipe(gulp.dest(config.app));
}
You have to add this in overrides in bower.json:
"overrides": {
"ngmap": {
"dependencies": {
"angular": "1.5.8"
}
}
}
Regards!
Related
I'm almost there with a jhipster generated app that I'm upgrading from v3.0.0 to v4.11, but I've been banging my head against a wall with gulp for almost a whole day now
When running serve/build tasks it seems to have an error when generating the environment from the ngconstant task.
If I understand right, gulp will run the task serve or build and then call the run-sequence, which should go to the ngconstant task and generate the contents for app.constants.js.
Well, it seems to fail when trying to pick up the name of the environment from ngconstant, here's the error:
[11:08:29] 'ngconstant:dev' errored after 37 ms
[11:08:29] Error in plugin 'gulp-tslint-log'
TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.dirname (path.js:1324:5)
at getFilePath (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:95:27)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:60:25)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
[11:08:29] Starting 'watch'...
[11:08:29] Finished 'watch' after 147 ms
[11:08:29] Error in plugin 'run-sequence(ngconstant:dev)'
Message:
TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.dirname (path.js:1324:5)
at getFilePath (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:95:27)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:60:25)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
Stack:
Error: TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.dirname (path.js:1324:5)
at getFilePath (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:95:27)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:60:25)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
at pluginError (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:99:12)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:65:33)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
at runNextSet (/home/steven/Desktop/Upgraded_MQ/node_modules/run-sequence/index.js:86:16)
at runSequence (/home/steven/Desktop/Upgraded_MQ/node_modules/run-sequence/index.js:97:2)
My gulpfile.js:
'use strict';
var gulp = require('gulp'),
expect = require('gulp-expect-file'),
sass = require('gulp-sass'),
rev = require('gulp-rev'),
templateCache = require('gulp-angular-templatecache'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
ngConstant = require('gulp-ng-constant-fork'),
eslint = require('gulp-eslint'),
es = require('event-stream'),
flatten = require('gulp-flatten'),
del = require('del'),
wiredep = require('wiredep').stream,
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
KarmaServer = require('karma').Server,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
gulpIf = require('gulp-if'),
inject = require('gulp-inject'),
angularFilesort = require('gulp-angular-filesort');
var handleErrors = require('./gulp/handleErrors'),
serve = require('./gulp/serve'),
util = require('./gulp/utils'),
build = require('./gulp/build');
var config = require('./gulp/config');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('copy', function () {
return es.merge(
gulp.src(config.app + 'content/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/fonts/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/fonts/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src([config.app + 'robots.txt', config.app + 'favicon.ico', config.app + '.htaccess'], { dot: true })
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist))
.pipe(gulp.dest(config.dist))
);
});
gulp.task('images', function () {
return gulp.src(config.app + 'content/images/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/images'))
.pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/images'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('sass', function () {
return es.merge(
gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(expect(config.sassSrc))
.pipe(changed(config.cssDir, {extension: '.css'}))
.pipe(sass({includePaths:config.bower}).on('error', sass.logError))
.pipe(gulp.dest(config.cssDir)),
gulp.src(config.bower + '**/fonts/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.app + 'content/fonts'))
.pipe(flatten())
.pipe(gulp.dest(config.app + 'content/fonts'))
);
});
gulp.task('styles', ['sass'], function () {
return gulp.src(config.app + 'content/css')
.pipe(browserSync.reload({stream: true}));
});
gulp.task('inject', function () {
return gulp.src(config.app + 'index.html')
.pipe(inject(gulp.src(config.app + 'app/**/*.js').pipe(angularFilesort()), {relative: true}))
.pipe(gulp.dest(config.app));
});
gulp.task('wiredep', ['wiredep:test', 'wiredep:app']);
gulp.task('wiredep:app', function () {
var stream = gulp.src(config.app + 'index.html')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
exclude: [
/angular-i18n/, // localizations are loaded dynamically
'bower_components/bootstrap-sass/assets/javascripts/' // Exclude Bootstrap js files as we use ui-bootstrap
]
}))
.pipe(gulp.dest(config.app));
return es.merge(stream, gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
ignorePath: /\.\.\/webapp\/bower_components\// // remove ../webapp/bower_components/ from paths of injected sass files
}))
.pipe(gulp.dest(config.scss)));
});
gulp.task('wiredep:test', function () {
return gulp.src(config.test + 'karma.conf.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
exclude: [
/angular-i18n/, // localizations are loaded dynamically
/angular-scenario/,
'bower_components/bootstrap-sass/assets/javascripts/' // Exclude Bootstrap js files as we use ui-bootstrap
],
ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected JavaScript files
devDependencies: true,
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'src/{{filePath}}\','
}
}
}
}))
.pipe(gulp.dest(config.test));
});
gulp.task('assets:prod', ['images', 'styles', 'html'], build);
gulp.task('html', function () {
return gulp.src(config.app + 'app/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache({
module: 'drugQualityDataManagerApp',
root: 'app/',
moduleSystem: 'IIFE'
}))
.pipe(gulp.dest(config.tmp));
});
gulp.task('ngconstant:dev', function () {
return ngConstant({
dest: 'app.constants.js',
name: 'drugQualityDataManagerApp',
deps: false,
noFile: true,
interpolate: /\{%=(.+?)%\}/g,
wrap:
'(function () {\n' +
' "use strict";\n' +
' // DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n' +
' {%= __ngModule %}\n' +
'})();\n',
constants: {
ENV: 'dev',
VERSION: util.parseVersion()
}
})
.pipe(gulp.dest(config.app + 'app/'));
});
gulp.task('ngconstant:prod', function () {
return ngConstant({
dest: 'app.constants.js',
name: 'drugQualityDataManagerApp',
deps: false,
noFile: true,
interpolate: /\{%=(.+?)%\}/g,
wrap:
'(function () {\n' +
' "use strict";\n' +
' // DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n' +
' {%= __ngModule %}\n' +
'})();\n',
constants: {
ENV: 'prod',
VERSION: util.parseVersion()
}
})
.pipe(gulp.dest(config.app + 'app/'));
});
// check app for eslint errors
gulp.task('eslint', function () {
return gulp.src(['gulpfile.js', config.app + 'app/**/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failOnError());
});
// check app for eslint errors anf fix some of them
gulp.task('eslint:fix', function () {
return gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint({
fix: true
}))
.pipe(eslint.format())
.pipe(gulpIf(util.isLintFixed, gulp.dest(config.app + 'app')));
});
gulp.task('test', ['wiredep:test', 'ngconstant:dev'], function (done) {
new KarmaServer({
configFile: __dirname + '/' + config.test + 'karma.conf.js',
singleRun: true
}, done).start();
});
gulp.task('watch', function () {
gulp.watch('bower.json', ['install']);
gulp.watch(['gulpfile.js', 'pom.xml'], ['ngconstant:dev']);
gulp.watch(config.sassSrc, ['styles']);
gulp.watch(config.app + 'content/images/**', ['images']);
gulp.watch(config.app + 'app/**/*.js', ['inject']);
gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});
gulp.task('install', function () {
runSequence(['wiredep', 'ngconstant:dev'], 'sass', 'inject');
});
gulp.task('serve', function () {
runSequence('install', serve);
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'wiredep:app', 'ngconstant:prod'], 'inject', 'assets:prod', cb);
});
gulp.task('default', ['serve']);
There's not much I have been able to try, I've basically been toying around with the differences between this gulp configuration and the pre-upgrade one, to find not many differences at all, and when changing, finding no positive results. I've also toyed around with the pom profile for deployment on server, no changes
So far, the only thing that lets the app build is to remove ngconstant calls from runSequence, leaving install, serve and build tasks like:
gulp.task('install', function () {
runSequence(['wiredep'], 'sass', 'inject');
});
gulp.task('serve', function () {
runSequence('install', serve);
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'wiredep:app'], 'inject', 'assets:prod', cb);
});
Where they used to be like:
gulp.task('install', function () {
runSequence(['wiredep', 'ngconstant:dev'], 'sass', 'inject');
});
gulp.task('serve', function () {
runSequence('install', serve);
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'wiredep:app', 'ngconstant:prod'], 'inject', 'assets:prod', cb);
});
This is far from an ideal workaround, but at least it keeps me on my feet, I would highly appreciate better recommendations for this
Working on a codebase that has used the yeoman angular generator (1.4.x).
gulp-rev is getting used and it's generating a new file (hash) name every single time even for the same code base, how can I keep the same file hash?
Here's the main task that's building it (I suppose),
gulp.task('html', ['inject', 'partials'], function () {
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: path.join(conf.paths.tmp, '/partials'),
addRootSlash: false
};
var htmlFilter = $.filter('*.html', { restore: true });
var jsFilter = $.filter('**/*.js', { restore: true });
var cssFilter = $.filter('**/*.css', { restore: true });
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe($.useref())
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
.pipe($.rev())
.pipe($.sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe(cssFilter)
// .pipe($.sourcemaps.init())
.pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.cssnano())
.pipe($.rev())
// .pipe($.sourcemaps.write('maps'))
.pipe(cssFilter.restore)
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.htmlmin({
removeEmptyAttributes: true,
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
collapseWhitespace: true
}))
.pipe(htmlFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true }));
});
STYLES TASK
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var browserSync = require('browser-sync');
var $ = require('gulp-load-plugins')();
var wiredep = require('wiredep').stream;
var _ = require('lodash');
gulp.task('styles-reload', ['styles'], function() {
return buildStyles()
.pipe(browserSync.stream());
});
gulp.task('styles', function() {
return buildStyles();
});
var buildStyles = function() {
var sassOptions = {
outputStyle: 'expanded',
precision: 10
};
var injectFiles = gulp.src([
path.join(conf.paths.src, '/app/**/*.scss'),
path.join('!' + conf.paths.src, '/app/app.scss')
], { read: false });
var injectOptions = {
transform: function(filePath) {
filePath = filePath.replace(conf.paths.src + '/app/', '');
return '#import "' + filePath + '";';
},
starttag: '// injector',
endtag: '// endinjector',
addRootSlash: false
};
return gulp.src([
path.join(conf.paths.src, '/app/app.scss')
])
.pipe($.inject(injectFiles, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe($.sourcemaps.init())
.pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
.pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
.pipe($.sourcemaps.write())
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
};
SCRIPTS TASK
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var browserSync = require('browser-sync');
var $ = require('gulp-load-plugins')();
gulp.task('scripts-reload', function() {
return buildScripts()
.pipe(browserSync.stream());
});
gulp.task('scripts', function() {
return buildScripts();
});
function buildScripts() {
return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.size())
};
Found this piece on the gulp-rev github page but,
I'm not good at gulp, so don't know what to change and where in the task here.
The stated purpose of gulp-rev is to do this:
Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css
The idea is to be able to cache these static files, but still deliver the latest code to the user. If you didn't want to revision your assets, you can simply take it out from your pipeline:
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe($.useref())
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
.pipe($.sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe(cssFilter)
// .pipe($.sourcemaps.init())
.pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.cssnano())
// .pipe($.sourcemaps.write('maps'))
.pipe(cssFilter.restore)
.pipe(htmlFilter)
.pipe($.htmlmin({
removeEmptyAttributes: true,
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
collapseWhitespace: true
}))
.pipe(htmlFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true
}));
I'm running Gulp with Browser Sync and getting the following errors in Chrome:
NonESPMessageInterface --- nonEspMessageInterface.js:8
TypeError: Cannot read property 'insertBefore' of null --- angular.js:13708
Checklist message was invalid, from origin #{e.origin}: MessageEventbubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: Windowdata: ObjectdefaultPrevented: falseeventPhase: 0isTrusted: truelastEventId: ""origin: "http://localhost:3000"path: Array(1)ports: Array(0)returnValue: truesource: WindowsrcElement: Windowtarget: WindowtimeStamp: 4354.4type: "message"proto: MessageEvent --- nonEspMessageInterface.js:53
My gulp.js file looks like this:
//required
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
stream = browserSync.stream,
cleanCSS = require('gulp-clean-css'),
concat = require('gulp-concat'),
cssnano = require('gulp-cssnano'),
del = require('del'),
imagemin = require('gulp-imagemin'),
ngAnnotate = require('gulp-ng-annotate'),
order = require('gulp-order'),
plumber = require('gulp-plumber'),
print = require('gulp-print'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify');
var devDir = 'main/app/';
var distDir = 'main/dist';
var path = {
scriptsApp: devDir + 'scripts/*.js',
scriptsModules: devDir + 'scripts/*/*.js',
sassApp: devDir + 'styles/scss/*.scss',
sassPartials: devDir + 'styles/scss/**/*.scss',
sassToCss: devDir + 'styles/css',
css: devDir + 'styles/css/*.css',
index: 'main/templates/*.html',
html: devDir + 'templates/**/*.html',
htmlPress: devDir + 'templates/**/**/*.html'
};
// sass tasks
gulp.task('sass', function() {
return gulp.src([path.sassApp, path.sassPartials])
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(path.sassToCss))
.pipe(stream({once:true}));
// call css tasks
done();
});
// css tasks
gulp.task('minify-css', ['sass'], function() {
return gulp.src([path.css])
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(autoprefixer('last 2 versions'))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rename('style.min.css'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(distDir))
.pipe(stream({once:true}));
});
// scripts tasks
gulp.task('scripts', function() {
return gulp.src([path.scriptsApp, path.scriptsModules])
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(order(['app.js', devDir + 'scripts/services/*.js']))
.pipe(ngAnnotate())
.pipe(uglify({mangle: false}))
.pipe(concat('all.js'))
.pipe(rename({suffix:'.min'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(distDir))
.pipe(stream({once:true}));
});
// html tasks
gulp.task('html', function() {
return gulp.src([path.index, path.html, path.htmlPress])
.pipe(stream({once:true}));
});
// image tasks - compress images
gulp.task('images', function() {
gulp.src('main/app/assets/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('main/app/assets/img/compressed'));
});
// browser-sync task
gulp.task('browser-sync', function() {
browserSync({
proxy: "localhost:8088"
});
});
// clean task
gulp.task('clean', function() {
return del(['main/dist/*', '!main/dist/ext', '!main/dist/assets']);
});
// watch task
gulp.task('watch', function() {
gulp.watch([path.scriptsApp, path.scriptsModules], ['scripts']);
gulp.watch([path.sassApp, path.sassPartials], ['sass']);
gulp.watch([path.css], ['minify-css']);
gulp.watch([path.index, path.html], ['html']);
});
// default task
gulp.task('default', ['clean'], function() {
gulp.start('sass', 'minify-css', 'scripts', 'html', 'browser-sync', 'watch');
});
Here's my package.json dependencies:
"devDependencies": {
"browser-sync": "^2.18.12",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean-css": "^2.0.13",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-imagemin": "^3.1.1",
"gulp-ng-annotate": "^2.0.0",
"gulp-order": "^1.1.1",
"gulp-plumber": "^1.1.0",
"gulp-print": "^2.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.9.1",
"gulp-uglify": "^2.0.0"
},
"dependencies": {
"video.js": "^5.17.0",
"vjs-video": "^0.1.10"
}
I recently updated to node v7.9.0. Perhaps this is not compatible with my config? Also, I'm using Angular 1.5.7.
Any help would be appreciated! Thx.
This error was being caused by the Litmus Chrome extension. Delete the extension and Browser Sync works.
https://chrome.google.com/webstore/detail/litmus/makmhllelncgkglnpaipelogkekggpio?hl=en-US
I have 4 html files.
index.html,
menu.html,
dishdetail.html,
contactus.html,
And I am using gulp for testing purposes and live preview. However,the index.html is not concatenated inside the dist folder. All the other folders such as images,styles and scripts are concatenated. So this is how I set up the gulp.
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
ngannotate = require('gulp-ng-annotate'),
browserSync = require('browser-sync'),
del = require('del');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
//Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('app/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true,
interlaced:
true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}',
['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: 'dist',
index: 'index.html'
},
reloadDelay: 1000
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
And when I type in cmd gulp,I get this error.
events.js:160
throw er; // Unhandled 'error' event
^
Error: write after end
at writeAfterEnd (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_SPAs\node_m
odules\gulp-minify-css\node_modules\readable-
stream\lib\_stream_writable.js:229:
12)
at Transform.Writable.write (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_
SPAs\node_modules\gulp-minify-css\node_modules\readable-
stream\lib\_stream_writa
ble.js:272:20)
Any ideas why this is happening?
All the modules are instralled through npm. They are shown here
package.json
{
"name": "conFusion",
"private": true,
"devDependencies": {
"browser-sync": "^2.18.8",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-changed": "^2.0.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-minify-css": "^1.2.4",
"gulp-ng-annotate": "^2.0.0",
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-uglify": "^2.0.1",
"gulp-usemin": "^0.3.28",
"jshint": "^2.9.4",
"jshint-stylish": "^2.2.1"
},
"engines": {
"node": ">=0.10.0"
}
}
Thanks,
Theo
use gulp-useref plugin
npm install --save-dev gulp-useref
Update gulpfile.js as below
var useref = require('gulp-useref');
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/*.html')
.pipe(useref())
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
There are a couple of possible reasons:
First, gulp-minify-css is deprecated and they recommend using gulp-clean-css, so you should try updating that.
Secondly, gulp-usemin is designed for node >=4.0 and your engines.node is set to >=0.10.0.
I used yeoman webapp to start my website. The goal is to make it
<script src=./scripts/vendor.js></script>
<script src=./scripts/main.js></script>
For my html files in another folder.
This my gulp file:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('styles', function () {
return gulp.src('app/styles/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'nested', // libsass doesn't support expanded yet
precision: 10,
includePaths: ['.'],
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.postcss([
require('autoprefixer-core')({browsers: ['last 1 version']})
]))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe(reload({stream: true, once: true}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
gulp.task('html', ['styles'], function () {
var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
return gulp.src('app/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', function () {
return gulp.src(require('main-bower-files')({
filter: '**/*.{eot,svg,ttf,woff,woff2}'
}).concat('app/fonts/**/*'))
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', function () {
return gulp.src([
'app/*.*',
'!app/*.html',
'app/'+'**/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', require('del').bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['styles', 'fonts'], function () {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/'+'**/*.html',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src(['app/*.html', 'app/'+'**/*.html'])
.pipe(wiredep({
exclude: ['bootstrap-sass-official'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['jshint', 'html', 'images', 'fonts', 'extras'], function () {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
I think the problem is somewhere when it tries to uglify. welp!