We Keep Coding

Gulp not transpiling SCSS into CSS

I can't get gulp to automatically compile my SASS code into CSS. What am I missing?
file structure:
public
-css
--styles.css
-index.html
sass
-styles.scss
gulpfile.js
package.json
Gulpfile:
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass');
gulp.task('serve', function() { browserSync.init({ server: "./public" });
gulp.watch("scss/**/*.scss", ['sass']);
gulp.watch("public/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
return gulp.src("scss/styles.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("public/css/styles.css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['sass', 'serve']);
Package.json:
{
"name": "gulptest",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"autoprefixer": "^9.3.1",
"browser-sync": "^2.26.3",
"cssnano": "^4.1.7",
"gulp-postcss": "^8.0.0",
"gulp": "^3.9.1",
"gulp-sourcemaps": "^2.6.4"
},
"devDependencies": {
"gulp-sass": "^4.0.2"
},
"scripts": {
"dev": "gulp"
},
"keywords": [],
"author": "",
"license": "ISC"
}

You have two issues:
As #cale_b said you are watching the wrong directory and your source in the sass task is wrong. So use this:
gulp.task('serve', function() { browserSync.init({ server: "./public" });
//gulp.watch("scss/**/*.scss", ['sass']);
gulp.watch("sass/**/*.scss", ['sass']);
gulp.watch("public/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
//return gulp.src("scss/styles.scss")
return gulp.src("sass/styles.scss")
.pipe(sass().on('error', sass.logError))
// and dest takes directories only, not file names
// sass will automatically produce styles.css
.pipe(gulp.dest("public/css"))
.pipe(browserSync.stream());
});

This is my working gulp sass setup:
gulp.task('sass', function() {
gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/css/'));
});
gulp.task('watch', function(){
gulp.watch(['scss/*.scss'], ['sass']);
});
It seems like it has source redundancies, but it works.

Gulp and index.html issue

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.

VueJS components not being exported correctly

I'm trying to setup VueJS components in a Node/Express app, I'm using Gulp with Browserify in order to import the components.
Problem:
My components aren't being exported correctly, after importing them, I try to debug with console.log, like this: import Home from './home.vue'; console.log(Home); and it returns this:
Object
_Ctor: VueComponent(options)
__proto__: Objec
Looking some working example (vue components), it should show method like: template, ready, data, etc in this object.
That's why I think my components are not being exported correctly, and the fact that my page is blank, nothing loads inside <div id="app"></div>.
Here are my setup:
Gulpfile.js:
/**
* Module Dependencies
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
var vueify = require('vueify');
var browserify = require('browserify');
var es = require('event-stream');
var source = require('vinyl-source-stream');
var tap = require('gulp-tap');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');
gulp.task('scripts', function () {
var b = browserify({
entries: 'scripts/store.js',
debug: true,
transform: [vueify, babelify.configure({presets: ["es2015"], plugins: ["add-module-exports"]})]
});
return b.bundle()
.pipe(source('scripts/store-app.js'))
.pipe(buffer())
.on('error', gutil.log)
.pipe(gulp.dest('./public/'));
});
/* Sass task */
gulp.task('sass', function () {
gulp.src('scss/**.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss'].concat()
}))
.pipe(gulp.dest('public/stylesheets'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('public/stylesheets'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
/* Reload task */
gulp.task('bs-reload', function () {
browserSync.reload();
});
/* Prepare Browser-sync for localhost */
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(['css/*.css', 'js/*.js'], {
/*
I like to use a vhost, WAMP guide: https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp, XAMP guide: http://sawmac.com/xampp/virtualhosts/
*/
proxy: 'localhost:3010',
port: 5000,
notify: true,
/* For a static server you would use this: */
//server: {
// baseDir: './public'
//}
});
});
gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
script: 'app.js',
ignore: [
'gulpfile.js',
'node_modules/'
]
})
.on('start', function () {
if (!called) {
called = true;
cb();
}
})
.on('restart', function () {
setTimeout(function () {
reload({ stream: false });
}, 1000);
});
});
/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['sass', 'browser-sync'], function () {
/* Watch scss, run the sass task on change. */
gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass'])
/* Watch app.js file, run the scripts task on change. */
gulp.watch(['scripts/*.js'], ['scripts'])
/* Watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['bs-reload']);
});
package.json:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"browserify": {
"transform": [
"vueify",
"babelify",
"browserify-shim"
]
},
"browserify-shim": {
"./js/vendor/jquery.js": "$",
"three": "global:THREE"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"bootstrap": "^4.0.0-alpha.4",
"browser-sync": "^2.17.5",
"gulp": "^3.9.1",
"gulp-browserify": "^0.5.1",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^2.2.0",
"gulp-tap": "^0.1.3",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"tether": "^1.3.7",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vinyl-transform": "^1.0.0",
"vue": "^1.0.26",
"vue-hot-reload-api": "^2.0.6",
"vue-i18n": "^4.7.1",
"vue-resource": "^0.9.3",
"vue-router": "^0.7.13",
"vueify": "^8.7.0"
},
"dependencies": {
"basic-auth-connect": "^1.0.0",
"browserify": "^13.1.0",
"ejs": "^2.5.1",
"express": "^4.14.0",
"gulp-nodemon": "^2.2.1",
"i18n": "^0.8.3",
"nodemon": "^1.11.0",
"swagger-client": "^2.1.18",
"browserify-shim": "~3.2.0"
}
}
app.js
var Vue = require('vue');
var VueResource = require('vue-resource');
var VueRouter = require('vue-router');
// Components
import Home from '../home.vue';
console.log(Home);
Vue.use(VueRouter);
Vue.use(VueResource);
console.log(Vue);
var router = new VueRouter({
hashbang: true,
// history: true,
transitionOnLoad: true
});
router.map({
'/': { component: Home, name: 'root' }
});
var App = Vue.extend({
});
router.start(App, '#app');
home.vue
<script>
var Header = require('../header.vue');
export default {
data () {
},
ready () {
},
components: {
'app-header': Header
}
}
</script>
<template>
<div>
Home
</div>
</template>
index.html.ejs
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="bundle.js"></script>
</body>
</html>
Notes:
1 - If I change my app.js using a inline component like the example below, it works:
var Foo = {
template: '<p>This is foo!</p>'
}
router.map({
'/': { component: Foo, name: 'root' },
});
More one reason I think the problem is on bundled components. In order to do bundle these components and get this structure to work I'm using some tools like: Browserify, Babel, Vueify, Babelify.

How to inject bower dependency in right order to jhipster project

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!

Gulp error - TypeError: Cannot call method 'match' of undefined

I'm trying to use Gulp with BrowserSync for a website running on MAMP - proxy'd through localhost:8888.
However, when running gulp, I get the following error:
[17:38:48] Starting 'browser-sync'...
[17:38:48] 'browser-sync' errored after 14 ms
[17:38:48] TypeError: Cannot call method 'match' of undefined
at Object.opts.callbacks.proxy (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/lib/cli/cli-options.js:123:21)
at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/lib/cli/cli-options.js:276:54
at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1165:46
at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1915:16
at ValueNode.iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:2282:12)
at BitmapIndexedNode.iterate.HashArrayMapNode.iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:2275:24)
at HashArrayMapNode.BitmapIndexedNode.iterate.HashArrayMapNode.iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:2275:24)
at src_Map__Map.__iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1913:32)
at KeyedIterable.mappedSequence.__iterateUncached (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1164:23)
at seqIterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:593:16)
at KeyedIterable.Seq.__iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:261:14)
at KeyedIterable.mixin.forEach (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:4327:19)
at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1771:16
at src_Map__Map.withMutations (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1891:7)
at new src_Map__Map (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1768:20)
at reify (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1704:37)
michaels-mbp:garcialau ParanoidAndroid$
My Gulpfile.js
(function() {
'use strict';
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
autoprefixer = require('gulp-autoprefixer'),
babel = require('gulp-babel'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create();
//neat = require('node-neat').includePaths;
gulp.task('browser-sync', function() {
browserSync.init({
proxy: {
host: 'localhost',
port: 8888
}
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('images', function(){
gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images/'));
});
gulp.task('styles', function(){
gulp.src(['src/css/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('dist/css/'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('scripts', function(){
return gulp.src('src/js/**/*.js')
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(babel())
.pipe(gulp.dest('dist/js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch('src/css/**/*.scss', ['styles']);
gulp.watch('src/js/**/*.js', ['scripts']);
gulp.watch('*.html', ['bs-reload']);
});
})();
My Package.json
{
"name": "Quench",
"version": "1.0.0",
"description": "A Gulp file and project generator.",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Quench",
"license": "ISC",
"devDependencies": {
"browser-sync": "2.6.5",
"gulp-autoprefixer": "2.1.0",
"gulp-babel": "5.1.0",
"gulp-cache": "0.2.8",
"gulp-concat": "2.5.2",
"gulp-jshint": "1.10.0",
"gulp-imagemin": "2.2.1",
"gulp-plumber": "1.0.0",
"gulp-rename": "1.2.2",
"gulp-sass": "1.3.3",
"gulp-uglify": "1.2.0",
"gulp": "~3.9.0",
"node-neat": "~1.7.2"
}
}
Any help would be greatly appreciated! I'm not amazingly familiar with npm, Grunt and BrowserSync.
Thanks!

The source suggests browser-sync is expecting a target property in your proxy config object.
The docs suggest you should specify a target property rather than separate host and port properties, so...
proxy: {
target: "localhost:8888",
}
... Or actually just:
proxy: "localhost:8888"