Gulp and index.html issue - javascript

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.

Related

Angular 4: Gulp Build Task with SystemJS returns Error ENOENT

UPDATED: 2020.02.13 - Looks like someone else fell through this same problem too - however, no solution. See Github.
A specific set of GulpJS errors are surfacing when trying to build out an Angular 4 Web App with SystemJS.
What's odd is that usually this build script works. There were no edits to the GulpJS or SystemJS file. I'm curious if something in the node/npm ecosystem changes this assumption. At any rate, your thoughts on a fix would be appreciated.
My Windows 10 machine is currently installed with Node version 10.14.0 and npm version of 6.9.0.
When executing npm run build:dev The errors from Gulp show in the terminal as:
Unhandled rejection Error on fetch for app/main.js at file:///C:/Users/Mark/Desktop/Development/Bitbucket/Angular4App/app/main.js
Error: ENOENT: no such file or directory, open 'C:\Users\Mark\Desktop\Development\Bitbucket\Angular4App\app\main.js'
To be clear, the above file being main.js does truly exist in the file system.
Gulp continues, and the remainder of the build completes. But when testing out the final build, the app doesn't load and this asset is missing from the final build:
Noticeably missing from the final build artifact:
app/assets/js/app/app.js
gulpfile.js:
'use strict';
// Install required dependencies for gulp task automation.
var gulp = require('gulp');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var systemjsBuilder = require('gulp-systemjs-builder')
var ts = require('gulp-typescript');
var htmlmin = require('gulp-htmlmin');
/**
* Compile Sass files and keep them in their respective locations.
*/
gulp.task('sass', function () {
console.log('Building Sass files.');
return gulp.src('app/**/*.scss', { base: './' })
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('.'));
});
/**
* Watch Sass files.
*/
gulp.task('sass:watch', function () {
console.log('Watching Sass files.');
gulp.watch('app/**/*.scss', ['sass']);
});
/**
* Compile TypeScript app to JS.
*/
gulp.task('compile:ts', function() {
console.log('Compile TypeScript files into JavaScript files for Angular 4 App.');
var tsProject = ts.createProject('tsconfig.json');
return tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject())
.js.pipe(gulp.dest('app'));
});
/**
* Generate systemjs-based bundle (app/app.js).
*/
gulp.task('bundle:app', function() {
console.log('Generate app.js file for Angular 4 App.');
var builder = systemjsBuilder();
builder.loadConfigSync('./system.config.js');
builder.buildStatic('app', 'app/app.js', {
minify: false,
mangle: false
})
.pipe(gulp.dest('portal/app/assets/js'));
})
/**
* Copy and bundle CSS dependencies into one file, vendors.min.css.
*/
gulp.task('bundle:vendorCSS', function() {
console.log('Copy and bundle dependencies into one file, vendors.css.');
return gulp.src([
'node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/font-awesome/css/font-awesome.min.css',
'node_modules/bootstrap-social/bootstrap-social.css'
])
.pipe(concat('vendors.min.css'))
.pipe(cleanCSS({
level: {
1: {
specialComments: false
}
}
}))
.pipe(gulp.dest('portal/app/assets/css/vendors'));
});
/**
* Copy and bundle CSS dependencies into one file, app.component.min.css.
*/
gulp.task('bundle:appCSS', function() {
console.log('Copy and bundle dependencies into one file, vendors.css.');
return gulp.src([
'app/assets/css/app.component.css'
])
.pipe(concat('app.component.min.css'))
.pipe(cleanCSS({
level: {
1: {
specialComments: false
}
}
}))
.pipe(gulp.dest('portal/app/assets/css'));
});
/**
* Copy and bundle FONT dependencies into one file, vendors.css.
*/
gulp.task('bundle:vendorFONT', function() {
console.log('Copy font dependencies to Angular 4 App\'s portal directory.');
return gulp.src([
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2*',
'node_modules/font-awesome/fonts/fontawesome-webfont.ttf*',
'node_modules/font-awesome/fonts/fontawesome-webfont.woff*',
'node_modules/font-awesome/fonts/fontawesome-webfont.woff2*'
])
.pipe(gulp.dest('portal/app/assets/css/fonts'));
});
/**
* Copy and bundle JAVASCRIPT dependencies into one file, vendors.js.
*/
gulp.task('bundle:polyfillsJS', function() {
console.log('Copy and bundle dependencies into one file, polyfills.js.');
return gulp.src([
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js'
])
.pipe(concat('polyfills.js'))
.pipe(gulp.dest('portal/app/assets/js/polyfills'));
});
/**
* Copy dependencies loaded from SystemJS into portal directory.
*/
gulp.task('copy:vendorJS', function () {
console.log('Copy 3rd party dependencies loaded from SystemJS to Angular 4 App\'s portal directory.');
return gulp.src([
'#angular/common/**',
'#angular/compiler/**',
'#angular/core/**',
'#angular/forms/**',
'#angular/http/**',
'#angular/platform-browser/**',
'#angular/platform-browser-dynamic/**',
'#angular/router/**',
'#ngx-translate/core/**',
'#ngx-translate/http-loader/**',
'#types/highcharts/**',
'angular2-highcharts/**',
'animate.css/**',
'bootstrap/**',
'bootstrap-daterangepicker/**',
'bootstrap-social/**',
'core-js/**',
'font-awesome/**',
'highcharts/**',
'jquery/**',
'jquery-slimscroll/**',
'lodash/**',
'moment/**',
"ng2-breadcrumb/**",
'ng2-daterangepicker/**',
'ngx-bootstrap/**',
'ngx-infinite-scroll/bundles/**',
'reflect-metadata/**',
'rxjs/**',
'systemjs/**',
'zone.js/**'
], { cwd: 'node_modules/**' }) /* Glob required here. */
.pipe(gulp.dest('portal/app/assets/js/vendors'));
});
/**
* Get the LOWER ENVIRONMENT index.html file to the root of the portal directory.
*/
gulp.task('index-lower', function(){
console.log('Get LOWER ENVIRONMENT index.html file to the root of Angular 4 App\'s portal directory.');
return gulp.src(['static_lower/index.html'])
.pipe(gulp.dest('portal'));
});
/**
* Copy the LOWER ENVIRONMENT app core files to the portal directory.
*/
gulp.task('core-lower', ['index-lower'], function(){
console.log('Copy LOWER ENVIRONMENT core application files to the root of Angular 4 App\'s portal directory.');
return gulp.src(['app/**', '!app/**/*.ts', '!app/**/*.scss'])
.pipe(gulp.dest('portal/app'));
});
/**
* Copy node server to portal directory.
*/
gulp.task('server', function () {
console.log('Copy server files to the root of Angular 4 App\'s portal directory.');
return gulp.src(['index.js', 'package.json'], { cwd: 'server/**' })
.pipe(gulp.dest('portal'));
});
/**
* Perform all LOWER ENVIRONMENT tasks at once.
*/
gulp.task('all-lower', ['sass', 'bundle:app', 'bundle:vendorCSS', 'bundle:appCSS', 'bundle:vendorFONT', 'bundle:polyfillsJS', 'copy:vendorJS', 'compile:ts', 'core-lower', 'index-lower', 'server']);
/**
* Bundle LOWER ENVIRONMENT dependencies and app into one file (app.bundle.js).
*/
gulp.task('bundle-lower', ['all-lower'], function() {
console.log('Copy and bundle LOWER ENVIRONMENT JavaScript dependencies into one file, app.bundle.js then drop it into Angular 4 App\'s portal directory.');
return gulp.src([
'portal/app/assets/js/polyfills/polyfills.js',
'portal/app/assets/js/app/app.js'
])
.pipe(concat('app.bundle.min.js'))
.pipe(uglify())
.pipe(gulp.dest('portal/app/assets/js'));
});
/**
* Minify HTML task.
* (filesToCopy is intentionally an empty array in this StackOverflow Question - you don't need a list of html files do you?)
*/
gulp.task('buildmini', function() {
console.log('Minify portal directory\'s html components.');
var filesToCopy = [
];
return gulp.src(filesToCopy, {base: './'})
.pipe(htmlmin({
collapseWhitespace: true,
caseSensitive: true
}))
.pipe(gulp.dest('./'));
});
/**
* Remove portal directory.
*/
gulp.task('clean', function (cb) {
console.log('Removing /portal directory.');
return del(['portal'], cb);
});
system.config.js:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app directory
app: 'app',
// angular bundles, inside of node_modules
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/common/http': 'node_modules/#angular/common/bundles/common-http.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries, inside of node_modules
'jquery': 'npm:jquery/dist/jquery.js',
'bootstrap': 'npm:bootstrap/dist/js/bootstrap.min.js',
'#ngx-translate/core': 'npm:#ngx-translate/core/bundles/core.umd.js',
'#ngx-translate/http-loader': 'npm:#ngx-translate/http-loader/bundles/http-loader.umd.js',
'rxjs': 'npm:rxjs',
'ngx-infinite-scroll': 'npm:ngx-infinite-scroll/bundles/ngx-infinite-scroll.umd.js',
'tslib': 'npm:tslib/tslib.js',
// charting frameworks
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts': 'npm:highcharts',
'highcharts/noData': 'npm:highcharts/modules/no-data-to-display.src.js',
'moment': 'npm:moment/moment.js',
'ngx-bootstrap': 'npm:ngx-bootstrap',
'bootstrap-daterangepicker': 'npm:bootstrap-daterangepicker/daterangepicker.js',
'ng2-breadcrumb': 'npm:ng2-breadcrumb',
'ng2-daterangepicker': 'npm:ng2-daterangepicker'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
highcharts: {
main: './highcharts.js',
defaultExtension: 'js'
},
'angular2-highcharts': {
main: './index.js',
defaultExtension: 'js'
},
'ngx-bootstrap': {
format: 'cjs',
main: 'bundles/ngx-bootstrap.umd.js',
defaultExtension: 'js'
},
'ng2-breadcrumb': {
main: './ng2-breadcrumb.js',
defaultExtension: 'js'
},
'ng2-daterangepicker': {
main: 'index',
defaultExtension: 'js'
}
}
});
})(this);
angular 4 package.json:
{
"name": "angular4-web-app",
"version": "1.0.0",
"author": "Mark",
"description": "Angular 4 Web App on SystemJS",
"homepage": "https://fakehomepage.com",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" \"gulp sass\" \"gulp sass:watch\" ",
"start:dev": "copy \"environment_dev.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"start:qa": "copy \"environment_qa.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"start:prod": "copy \"environment_prod.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"sass": "gulp sass",
"sass:watch": "gulp sass:watch",
"build:dev": "copy \"environment_dev.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-lower",
"build:qa": "copy \"environment_qa.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-lower",
"build:prod": "copy \"environment_prod.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-prod",
"final": "gulp buildmini",
"destroy": "gulp clean"
},
"license": "ISC",
"dependencies": {
"#angular/common": "4.4.7",
"#angular/compiler": "4.4.7",
"#angular/core": "4.4.7",
"#angular/forms": "4.4.7",
"#angular/http": "4.4.7",
"#angular/platform-browser": "4.4.7",
"#angular/platform-browser-dynamic": "4.4.7",
"#angular/router": "4.4.7",
"#ngx-translate/core": "^6.0.1",
"#ngx-translate/http-loader": "0.0.3",
"#types/highcharts": "^4.2.57",
"angular2-highcharts": "^0.5.5",
"animate.css": "^3.5.2",
"bootstrap": "^3.4.1",
"bootstrap-social": "^5.1.1",
"core-js": "^2.4.1",
"font-awesome": "~4.7.0",
"gulp": "^3.9.1",
"gulp-htmlmin": "^5.0.1",
"highcharts": "^5.0.12",
"jquery": "^3.4.1",
"jquery-slimscroll": "^1.3.8",
"lodash": "^4.17.15",
"moment": "^2.18.1",
"ng2-breadcrumb": "^0.5.14",
"ng2-daterangepicker": "^2.0.8",
"ngx-bootstrap": "^2.0.5",
"ngx-infinite-scroll": "^0.5.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.4.2",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"#types/node": "^6.0.60",
"concurrently": "^3.1.0",
"connect-history-api-fallback": "^1.3.0",
"del": "^2.2.2",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-systemjs-builder": "^0.15.0",
"gulp-typescript": "^3.2.1",
"gulp-uglify": "^3.0.0",
"lite-server": "^2.3.0",
"tslint": "^3.7.4",
"typescript": "^2.2.2"
},
"repository": {
"type": "git",
"url": "https://bitbucket.org/mark/angular4-web-app.git"
}
}
Within your config files, such as webpack config or Babel, you will need to use a OS agnostic method of finding files because:
Windows uses \ and everything else uses /
So require Node's built in path module
const path = require('path')
And in your config files use path and __dirname
// "target": "./dist"
"target": path(__dirname, '/dist')
Evidence from webpack:
https://webpack.js.org/configuration/
(Though it's not just webpack that has the issue)

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 + Browser Sync failing

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

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.

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"

Categories