The part of gulpfile is
gulp.task('serve',['sass'], function() {
browserSync.init({
proxy: "dev.cz/project"
});
gulp.watch(paths.styles.src + '**/*.scss', ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
it gives me error
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn EACCES
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34)
The project is on out local server, I am connected to server via ssh. Everything works fine, until I take broswerync to the party. Any idea ??
This is probably an error because BrowserSync don't have permission to open a browser page for some reason.
adding the property open: false will solve this
Related
I'm picking up an error with gulp on Windows 10
Running gulp through git bash works fine, it opens the current project in a new browser tab, but the moment I alter the style.scss file, and save it in atom, this error comes up...
[17:02:54] Starting 'css'...
events.js:183
throw er; // Unhandled 'error' event
^
BrowserslistError: Unknown browser query `> 1%`
at C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:164:11
at Array.reduce (<anonymous>)
at resolve (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:132:18)
at browserslist (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:224:16)
at Browsers.parse (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\postcss\lib\lazy-result.js:192:32)
Solved it
Seen as though I am using Chrome, it was creating a conflict in /node_modules/browserlist/index.js
I edited %1 and took out firefox and added:
// Default browsers query
browserslist.defaults = [
'> 5%'
]
I then also had to change gulpfile to correspond with the following task:
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('> 5%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
Here's the source if anyone encounters an issue like this
I am trying to run the gulp build task for the dev environment on the server but its failing. However, The same gulp build is working on my local machine. The function and error are given below.
Function:
// S3 Upload for dev
gulp.task('s3sync:dev', function () {
var config = {
accessKeyId: "-Key-",
secretAccessKey: "-Key-"
};
var s3 = require('gulp-s3-upload')(config);
return gulp.src("./dist/**")
.pipe(s3({
Bucket: 'example',
ACL: 'public-read'
}, {
maxRetries: 5
}))
});
Command:
Gulp build:development
Error:
[09:01:04] Starting 's3sync:dev'...
events.js:160
throw er; // Unhandled 'error' event
^
Error: EISDIR: illegal operation on a directory, read
at Error (native)
Any idea?
Finally, This problem has been solved by removing a system symlink which was created after the deployment from the capistrano which is also running below npm commands.
npm run clean && npm run build
After removing the system file. I have run the below command and it works fine.
gulp build:development
I have a simple watch on gulp that reloads all js files (using gulp-connect) when one of them has changes, but I'm getting the following error whenever the task asociated runs:
[15:14:35] Starting 'livereload:js'...
events.js:160
throw er; // Unhandled 'error' event
^
Error: write after end
at ServerResponse.OutgoingMessage.write (_http_outgoing.js:439:15)
at ServerResponse.res.inject.res.write (C:\dev\test-livereload\node_modules\connect-livereload\index.js:115:37)
at ReadStream.ondata (_stream_readable.js:555:20)
at emitOne (events.js:96:13)
at ReadStream.emit (events.js:188:7)
at readableAddChunk (_stream_readable.js:176:18)
at ReadStream.Readable.push (_stream_readable.js:134:10)
at onread (fs.js:1984:12)
at FSReqWrap.wrapper [as oncomplete] (fs.js:681:17)
Here's the code:
gulp.task('livereload:js', function() {
return gulp.src([paths.APP_ROOT + '/**/*.js'])
//.pipe(wait(2000)) // if I add a small wait it doesn't crash as often
.pipe(connect.reload());
});
gulp.task('run-watch', function() {
gulp.watch([paths.APP_ROOT + '/**/*.js'], ['livereload:js']);
});
I have a similar task that checks for changes in scss files and compiles them before reloading that works fine.
I found a workaround. Instead of gulp.watch I use the gulp-watch package to run connect.reload(), which can be used in a pipe.
I think there was a race condition that was triggering the reload before the files were ready.
I have some CSS that is created by gulp-ruby-sass. The resultant CSS file is referenced in the html used by gulp-useref to get my assets for concatenation, minification, etc. The problem is (I think) that gulp-ruby-sass hasn't written the CSS file to disk yet and gulp-useref can't find the file to include it in the build. So this code:
gulp.task("compile-css", function () {
gulp.src(paths.css.appFiles)
.pipe(gutil.env.debug ? sass({ debugInfo : true }) : sass())
.pipe(gutil.env.debug ? gutil.noop() : cssmin())
.pipe(gulp.dest(paths.css.appDistDir));
});
gulp.task("concatenateAllTheThings", ["compile-css"], function () {
var assets = useref.assets(); // useref package does the magic
return gulp.src(["./index.html", "./login.html", "./reset.html", "./confirm.html"])
.pipe(assets)
.pipe(gulpif('*.js',ngAnnotate()))
.pipe(gulpif('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(paths.output.destination));
});
throws this error:
[19:06:32] Starting 'compile-css'...
[19:06:32] Finished 'compile-css' after 13 ms
[19:06:32] Starting 'concatenateAllTheThings'...
[19:06:32] Starting Karma server...
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, no such file or directory 'c....\webui\css\custom.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:81:61)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....g\AppData\Roaming\npm\node_modules\gulp-useref\index.js:70:35)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:46:36)
at Array.forEach (native)
at DestroyableTransform._transform (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:43:15)
at DestroyableTransform.Transform._read (C....\AppData\Roaming\npm\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
How can I get gulp-useref to see the CSS file from gulp-ruby-sass?
To let know gulp when a task is finished, you need to return the stream. This way, a task with a dependency on a task that you return will wait for it to finish.
So change compile-css to
gulp.task("compile-css", function () {
return gulp.src ...
});
I'm using gulp-minify-inline-scripts:
https://www.npmjs.org/package/gulp-minify-inline-scripts
I've got it in my gulp file as follows:
gulp.task('minify-inline', function() {
gulp.src('www/**/*.html')
.pipe(minifyInline())
.on('error', gutil.log)
.pipe(gulp.dest('www'))
});
However, whenever I run the gulp task (even with all inline scripts removed from the site files), I get this error message and I can't figure out what the problem is:
{ [Error: uglify inline scripts error: Error
at new JS_Parse_Error (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:189:18)
at js_error (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:197:11)
at croak (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:656:9)
at token_error (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:664:9)
at unexpected (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:670:9)
at semicolon (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:690:43)
at simple_statement (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:864:73)
at /Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:723:47
at /Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:703:24
at block_ (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:977:20)]
message: 'uglify inline scripts error: Error\n at new JS_Parse_Error (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:189:18)\n
at js_error (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:197:11)\n
at croak (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:656:9)\n
at token_error (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:664:9)\n
at unexpected (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:670:9)\n
at semicolon (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:690:43)\n
at simple_statement (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:864:73)\n
at /Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:723:47\n
at /Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:703:24\n
at block_ (/Users/heather/Documents/Work/company/Web/NewSite/node_modules/gulp-minify-inline-scripts/node_modules/uglify-js/lib/parse.js:977:20)',
showStack: false,
showProperties: true,
plugin: 'gulp-minify-inline-scripts',
__safety: { toString: [Function] } }