gulpfile.js
'use strict';
var gulp = require('gulp');
gulp.paths = {
src: 'src',
dist: 'dist',
tmp: '.tmp',
e2e: 'e2e'
};
require('require-dir')('./gulp');
gulp.task('build', ['clean'], function () {
gulp.start('buildapp');
});
gulp/server.js
'use strict';
var gulp = require('gulp');
var paths = gulp.paths;
var util = require('util');
var browserSync = require('browser-sync');
var middleware = require('./proxy');
function browserSyncInit(baseDir, files, browser) {
browser = browser === undefined ? 'default' : browser;
var routes = null;
if(baseDir === paths.src || (util.isArray(baseDir) && baseDir.indexOf(paths.src) !== -1)) {
routes = {
'/bower_components': 'bower_components'
};
}
browserSync.instance = browserSync.init(files, {
startPath: '/',
server: {
baseDir: baseDir,
middleware: middleware,
routes: routes
},
browser: browser
});
}
gulp.task('serve', ['watch'], function () {
browserSyncInit([
paths.tmp + '/serve',
paths.src,
], [
paths.tmp + '/serve/{app,components}/**/*.css',
paths.src + '/{app,components}/**/*.js',
paths.src + 'src/assets/images/**/*',
paths.tmp + '/serve/*.html',
paths.tmp + '/serve/{app,components}/**/*.html',
paths.src + '/{app,components}/**/*.html'
]);
});
gulp.task('serve:dist', ['buildapp'], function () {
browserSyncInit(paths.dist);
});
gulp.task('serve:e2e', ['inject'], function () {
browserSyncInit([paths.tmp + '/serve', paths.src], null, []);
});
gulp.task('serve:e2e-dist', ['buildapp'], function () {
browserSyncInit(paths.dist, null, []);
});
node version: v0.10.25
npm version: 1.3.10
gulp CLI and Local version: 3.9.0
OS: Ubuntu 14.04.2 LTS
I also install all node packages correctly and no errors. But if I run gulp serve
I get the Error: spawn EACCES
I clearly uninstalled node, npm, bower, gulp etc. and installed them back already but it doesn't solved the problem.
Here's the whole error log when I run gulp serve
:
[22:15:33] Using gulpfile /media/culaste/Data/Code/sampleapp/source/gulpfile.js
[22:15:33] Starting 'styles'...
[22:15:34] gulp-inject 26 files into app.scss.
[22:15:34] Finished 'styles' after 1.24 s
[22:15:34] Starting 'inject'...
[22:15:34] gulp-inject 1 files into 404.tmpl.html.
[22:15:34] gulp-inject 1 files into 500.tmpl.html.
[22:15:35] gulp-inject 1 files into index.html.
[22:15:35] gulp-inject 105 files into 404.tmpl.html.
[22:15:35] gulp-inject 105 files into 500.tmpl.html.
[22:15:35] gulp-inject 105 files into index.html.
[22:15:35] Finished 'inject' after 668 ms
[22:15:35] Starting 'watch'...
[22:15:36] Finished 'watch' after 1.19 s
[22:15:36] Starting 'serve'...
[22:15:36] Finished 'serve' after 94 ms
[BS] Local URL: http://localhost:3000/
[BS] External URL: http://192.168.8.101:3000/
[BS] Serving files from: .tmp/serve
[BS] Serving files from: src
[BS] Watching files...
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn EACCES
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)
The problem was when browserSync tries to open my browser, it throws the error because of permission issue. adding open: false
solves the problem.
gulp/server.js
browserSync.instance = browserSync.init(files, {
startPath: '/',
open:false,
server: {
baseDir: baseDir,
middleware: middleware,
routes: routes
},
browser: browser
});
I know it's not already necessary to fix the permission issue but I think maybe it would be nice if when you run your development server, it will automatically opens the browser(new tab if browser is already open) for you. Any suggestions and/or solutions are greatly appreciated. Thank you everyone.