I'm trying to run a simple gulp-sass task, but I'm getting this error:
[22:42:14] Starting 'sass'...
[22:42:14] Finished 'sass' after 10 ms
events.js:72
throw er; // Unhandled 'error' event
^
Error: File not found with singular glob
at Glob.<anonymous> (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\index.js:34:30)
at Glob.EventEmitter.emit (events.js:95:17)
at Glob._finish (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\glob.js:171:8)
at done (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\glob.js:158:12)
at Glob._processSimple2 (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\glob.js:640:12)
at D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\glob.js:628:10
at Glob._stat2 (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\glob.js:724:12)
at lstatcb_ (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\glob.js:716:12)
at RES (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\node_modules\inflight\inflight.js:23:14)
at f (D:\Development\WebStorm\calliope\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-stream\node_modules\glob\node_modules\once\once.js:17:25)
I Installed gulp both globally and locally as dev depency.
Here's my task:
var gulp = require("gulp"),
sass = require("gulp-sass");
gulp.task("sass", function(){
gulp.src('assets/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('assets/css'))
});
The error is not so clear, by the way the Exception is throwed by a wrong link ( resource not found )
Yes, that is correct. The error is thrown whenever the resource is not found. I wrote a function to prevent such an occurrence in my files.
run "npm install fs --save".
then add this to your gulpfile
var fs = require('fs');
var validateResources = function (resources) {
resources.forEach(function (resource) {
if (!fs.existsSync(resource)) {
throw resource + " not found!";
}
});
};
With this, you will be safe to some extent.
Related
Im trying to transform my css with PostCss using Gulp.
When I add the cssnext plugin to PostCss I get the following error:
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.19, but postcss-import uses 4.1.16. Perhaps this is the source of the error below.
This is my gulpfile.js:
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
gulp.task('styles', function() {
const postCssPlugins = [
require('cssnext')()
];
gulp.src('src/css/*.css')
.pipe(postcss(postCssPlugins))
.pipe(concat('style.css'))
.pipe(gulp.dest('.'));
});
Full stack trace:
events.js:183
throw er; // Unhandled 'error' event
^
TypeError: styles.eachAtRule is not a function
at parseStyles (C:\gulp-test\node_modules\cssnext\node_modules\postcss-import\index.js:134:10)
at C:\gulp-test\node_modules\cssnext\node_modules\postcss-import\index.js:84:30
at LazyResult.run (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:192:32)
at processing.Promise.then._this2.processed (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:231:20)
at new Promise (<anonymous>)
at LazyResult.async (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:228:27)
at LazyResult.then (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:134:21)
at process._tickCallback (internal/process/next_tick.js:188:7)
As far as I know, the postcss-import package is a dependency of cssnext. So what should I do?
I found the answer:
According to the website of cssnext, the package cssnext (which I used) is dead. The new package to use with PostCSS is postcss-cssnext:
const postCssPlugins = [
require('postcss-cssnext')()
];
Can not create a symbolic link to the /var/www/project/bower_components/bootstrap/less/mixins folder via Gulp JS. I tried to specify the desired path via the nodeJS.
VARIANT 1
CODE:
var gulp = require('gulp');
var path = require('path');
var debug = require('gulp-debug');
var symlink = require('gulp-sym');
gulp.task('symlink-deploy', function () {
var mixins = gulp
.src('' + path.resolve() + 'bower_components/bootstrap/less/mixins/')
.pipe(symlink('' + path.resolve() + 'assets/less/'))
.pipe(debug({title: 'unicorn:'}));
return Promise.all([mixins]);
});
gulp.task('default', ['symlink-deploy']);
RESULT:
user#user-ThinkPad-Edge-E545:/var/www/project$ gulp symlink-deploy
[17:18:44] Using gulpfile /var/www/project/gulpfile.js
[17:18:44] Starting 'symlink-deploy'...
[17:18:44] Finished 'symlink-deploy' after 28 ms
events.js:141
throw er; // Unhandled 'error' event
^
Error: EISDIR: illegal operation on a directory, read
at Error (native)
user#user-ThinkPad-Edge-E545:/var/www/project$
I have also was tried set path manually:
VARIANT 2
CODE:
var gulp = require('gulp');
var path = require('path');
var debug = require('gulp-debug');
var symlink = require('gulp-sym');
gulp.task('symlink-deploy', function () {
var mixins = gulp
.src('/home/user/www/project/bower_components/bootstrap/less/mixins')
.pipe(symlink('/home/user/www/project/assets/less'))
.pipe(debug({title: 'unicorn:'}));
return Promise.all([mixins]);
});
gulp.task('default', ['symlink-deploy']);
RESULT:
user#user-ThinkPad-Edge-E545:/var/www/project$ gulp symlink-deploy
[17:57:55] Using gulpfile /var/www/project/gulpfile.js
[17:57:55] Starting 'symlink-deploy'...
[17:57:55] Finished 'symlink-deploy' after 27 ms
events.js:141
throw er; // Unhandled 'error' event
^
Error: Destination file exists (/home/user/www/project/assets/less) - use force option to replace
at Transform._transform (/var/www/project/node_modules/gulp-sym/index.js:55:26)
at Transform._read (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at Transform._write (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at Transform.Writable.write (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at write (/var/www/project/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/var/www/project/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/var/www/project/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at emitNone (events.js:67:13)
user#user-ThinkPad-Edge-E545:/var/www/project$
Can't understand why it is't working.
It used to work, if I run gulp with one or few instances already running, it will find new port (3001, 3002, 3003, 3004, [...]) and run without any issue.
I tweaked code occasionally and then I noticed that it doesn't work anymore. I don't know when it stopped working and what changed. It demands to run on only port 3000, without automatically finding new port and running on it.
Can anyone look at my gulpfile.js to see anything that is stopping from multiple instances running?
Error:
λ gulp
[19:32:57] Using gulpfile D:\Dev\Projects\NASDAQ\gulp\gulpfile.js
[19:32:57] Starting 'sass'...
[19:32:57] Finished 'sass' after 29 ms
[19:32:57] Starting 'serve'...
[19:33:07] Finished 'serve' after 10 s
[19:33:07] Starting 'default'...
[19:33:07] Finished 'default' after 5.43 μs
events.js:141
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3000
at Object.exports._errnoException (util.js:837:11)
at exports._exceptionWithHostPort (util.js:860:20)
at Server._listen2 (net.js:1231:14)
at listen (net.js:1267:10)
at Server.listen (net.js:1363:5)
at module.exports.plugin (D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\lib\server\index.js:24:25)
at Object.module.exports.startServer [as fn] (D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\lib\async.js:236:52)
at D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\lib\browser-sync.js:149:14
at iterate (D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\node_modules\async-each-series\index.js:8:5)
at D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\node_modules\async-each-series\index.js:16:16
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "..",
notify: false
});
gulp.watch("../assets/scss/*.scss", ['sass']);
gulp.watch("../**/*").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("../assets/scss/*.scss")
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass())
.pipe(gulp.dest("../assets/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
I hope this issue can be resolved. Thanks.
I have a pretty simple gulp file with a couple tasks:
- Clean a folder
- Copy files
I have a watch setup. I keep getting an error:
events.js:85
throw er; // Unhandled 'error' event
^
Error: ENOENT, open '/Users/gordon/Dropbox/Dev/MDR/ScribeTab/dist/font/Roboto-Regular-webfont.woff'
I don't understand whats wrong, like I said sometimes it works when I run the watch, sometimes it fails on the watch, sometimes it fails when the watch task (default) is ran after I make a change to popup.html.
Here is my complete gulpfile:
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
path = require('path'),
del = require('del')
gulp.task('default', ['clean', 'copy'])
gulp.task('clean', function(){
return del('dist/**/*');
});
gulp.task('copy', function() {
/* copy fonts */
var fonts = gulp.src('src/font/*')
.pipe(gulp.dest("dist/font"));
/* copy images */
var imgs = gulp.src('src/img/*')
.pipe(gulp.dest("dist/img"));
/* copy html files */
var html = gulp.src('src/**/*.html')
.pipe(gulp.dest("dist"));
/* copy manifest file for google chrome */
var manifest = gulp.src('src/manifest.json')
.pipe(gulp.dest('dist'));
});
// watch
gulp.task('watch', ['default'], function () {
gulp.watch(['src/popup.html'], ['default']);
});
Sounds like something may be running out of order, perhaps try copy first then clean
Also try adding this error logging function:
function errorlog(err) {
console.log(err.message);
this.emit('end');
}
gulp.task('clean', function() {
return del('dist/**/*')
.on('error', errorlog);
});
I try to delete all folders and files from my directory using gulp-clean.
My directory:
app
---subfolder1
---subfolder2
------subfolder
------file1
etc
My code:
gulp.task('clean',function(){
var PATH_TO_CLEAN = '../app/**';
if(argv.path != null)
PATH_TO_CLEAN = '../app/'+argv.path+'/**';
return gulp.src(PATH_TO_CLEAN, {read: false})
.pipe(clean({force: true}))
.on("error", handleError);
});
// Error handler
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
default path is '../app' but you can delete only subfolder using parametes --path=subfolder_dir
During the execution of gulp clean this error apears:
[14:43:08] Starting 'clean'...
events.js:85
throw er; // Unhandled 'error' event
^
Error: ENOENT, lstat 'C:\some_path\file.type'
at Error (native)
Gulp stops but file mentioned in error is deleted.
Repeating "gulp clean" I can finally reach succes:
[14:53:54] Starting 'clean'...
[14:53:54] Finished 'clean' after 11 ms
Do you have any idea how I can avoid this error?
I tried allso del with no success.
Found solution:
gulp.task('clean',function(){
var PATH_TO_CLEAN = '../app/**';
if(argv.path != null)
PATH_TO_CLEAN = '../app/'+argv.path+'/**';
del([PATH_TO_CLEAN], {force: true});
});
this is not the way I would like to manage this (by pipes) but it works well.
gulp-clean has been deprecated and should not be used anymore.
In my project skeletonSPA, I use the following task to clean my environment:
gulp.task('clean', function() {
var del = require('del');
var vinylPaths = require('vinyl-paths');
return gulp.src([PATH_TO_CLEAN])
.pipe(vinylPaths(del));
});
This task does not break the gulp pipe.
For this to work, you'll need to install the following modules:
npm install del vinyl-paths