Related
Hi everbody I hope everyone is alright during this pandemic. I got 1 issue with my code my but my sass and autoprefixer are working fine only my scripts task wont stop whenever I save my main.js. I hope everyone can help me with this one. Thank You
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
return gulp.src('./scss/**/*.scss')
.pipe(sass({
errLogToConsole: true,
outputStyle: 'expanded'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer(['last 99 versions'], {cascade: true }))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream());
});
// I think my script task its the problem
gulp.task('scripts', function() {
return gulp.src('./js/*.js')
.pipe(gulp.dest('./js/'))
.pipe(browserSync.stream());
});
gulp.task('html', function () {
return gulp.src('./*.html')
.pipe(browserSync.stream());
});
gulp.task('browserSync', function(){
browserSync.init({
server : {
baseDir : './'
}
});
gulp.watch('./scss/**.scss', gulp.series('sass'));
gulp.watch('./*.html', gulp.series('html'));
gulp.watch('./js/*.js', gulp.series('scripts'));
});
gulp.task('default', gulp.series('sass', 'scripts', 'html', 'browserSync'));
My Basic Directory Tree:
|-css
|-img
|-js
|- main.js
package.json:
{
"name": "horita",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-sass": "^4.1.0"
}
}
On terminal you can see below that the task wont end it keeps on Finished and Starting.
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)
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'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"