I am using gulp to copy and clean my front-end projects. I want to run some sequential tasks. It means, for example, I want the copy task to be started and finished and then run its the following task (a copy task).
I frequently see this error when I run my tasks:
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, lstat '/home/reza/projects/account-web/dist/views'
After lstat, each I see a file name randomly. I just find that when there is no dist folder or it is empty copy tasks run properly but when the dist folder is not empty even clean task throws and error.
There are my gulp file and command results below:
var gulp = require('gulp');
var clean = require('gulp-clean');
var merge = require('gulp-merge');
var runSequence = require('run-sequence');
gulp.task('clean', function () {
gulp.src('./dist/**').pipe(clean());
});
gulp.task('copy-js', function () {
return gulp.src('app/js/**').pipe(gulp.dest('dist/js/'));
});
gulp.task('copy-bower', function () {
return gulp.src('bower_components/**').pipe(gulp.dest('dist/bower_components/'));
});
gulp.task('copy-script', function () {
return gulp.src('app/scripts/**').pipe(gulp.dest('dist/scripts/'));
});
gulp.task('copy-styles', function () {
var stream1 = gulp.src('app/styles/**').pipe(gulp.dest('dist/styles/'));
var stream2 = gulp.src('app/fonts/**').pipe(gulp.dest('dist/fonts/'));
var stream3 = gulp.src('app/img/**').pipe(gulp.dest('dist/img/'));
return merge(stream1, stream2, stream3);
});
gulp.task('copy-views', function () {
var stream1 = gulp.src('app/views/**').pipe(gulp.dest('dist/views/'));
var stream2 = gulp.src('app/*').pipe(gulp.dest('dist/'));
return merge(stream1, stream2);
});
gulp.task('dist', function () {
runSequence(['copy-bower','copy-js', 'copy-script', 'copy-styles', 'copy-views']);//
});
gulp.task('dev', function () {
runSequence('clean', 'dist')
});
gulp.task('default', ['dev']);
I thought that there is concurrency problem and the tasks are not running really sequentially, so I tries some modules to solve this problem like runSequence.
➜ account-web git:(master) ✗ gulp clean
[14:20:55] Using gulpfile ~/projects/account-web/Gulpfile.js
[14:20:55] Starting 'clean'...
[14:20:55] Finished 'clean' after 5.58 ms
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, lstat '/home/reza/projects/account-web/dist/views'
➜ account-web git:(master) ✗ gulp dev
[14:35:03] Using gulpfile ~/projects/account-web/Gulpfile.js
[14:35:03] Starting 'dev'...
[14:35:03] Starting 'clean'...
[14:35:03] Finished 'clean' after 5.47 ms
[14:35:03] Starting 'dist'...
[14:35:03] Starting 'copy-bower'...
[14:35:03] Starting 'copy-js'...
[14:35:03] Starting 'copy-script'...
[14:35:03] Starting 'copy-styles'...
[14:35:03] Starting 'copy-views'...
[14:35:03] Finished 'dist' after 14 ms
[14:35:03] Finished 'dev' after 22 ms
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: ENOENT, open '/home/reza/projects/account- web/dist/styles/fonts.css'
I wonder if it's attempting to asynchronously delete a file within a nested folder after the nested folder has already been deleted. Try changing your src to include the dist folder without the wildcards. This will tell it to delete the dist folder instead of each item independently.
gulp.task('clean', function () {
gulp.src('./dist').pipe(clean());
});
It also appears that gulp-clean has been deprecated, you may want to checkout del as a replacement. It is able to handle your original glob pattern correctly.
Related
I have a Gulp script to concatenate, and minimize javascript.
It seems to be working but doesn't output the combined file.
The script is (complete - including extra debug bits):
// include plug-ins
var fs = require('fs');
var gulp = require('gulp');
var count = require('gulp-count');
var debug = require('gulp-debug');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var config = {
src: 'dist/libraries/',
dest: 'dist/js/',
outputfile: 'libraries.min.js'
}
gulp.task('read', (done) => {
fs.readdir(config.src, (err, items) => {
console.log(items);
});
done();
});
//delete the output file(s)
gulp.task('clean', gulp.series('read'), (done) => {
//del is an async function and not a gulp plugin (just standard nodejs)
//It returns a promise, so make sure you return that from this task function
// so gulp knows when the delete is complete
return del([config.dest + config.outputfile]);
});
// Combine and minify all files from the app folder
// This tasks depends on the clean task which means gulp will ensure that the
// Clean task is completed before running the scripts task.
gulp.task('scripts', gulp.series('clean'), (done) => {
//Include all js files but exclude any min.js files
var files = [config.src + '*.js', '!' + config.src + '*.min.js'];
return gulp.src(files)
.pipe(debug())
.pipe(count('## files selected'))
.pipe(uglify())
.pipe(concat(config.outputfile))
.pipe(gulp.dest(config.dest));
});
//Set a default tasks
gulp.task('default', gulp.series('scripts'), (done) => {
});
Which produces the output - including file list for verification there are src files:
[07:46:25] Using gulpfile <path>\gulpfile.js
[07:46:25] Starting 'default'...
[07:46:25] Starting 'scripts'...
[07:46:25] Starting 'clean'...
[07:46:25] Starting 'read'...
[07:46:25] Finished 'read' after 996 μs
[07:46:25] Finished 'clean' after 2.73 ms
[07:46:25] Finished 'scripts' after 4.26 ms
[07:46:25] Finished 'default' after 6.9 ms
[ 'bootstrap-datetimepicker.js',
'bootstrap.min.js',
'chart.min.js',
'cycle.js',
'farbtastic.js',
'jquery-3.2.1.min.js',
'jquery-sortable-min.js',
'moment.min.js',
'ol.min.js',
'pablo.min.js',
'popper.min.js',
'proj4.js',
'promisedIndexDB.js',
'qunit-2.6.1.js',
'toastr.js' ]
If I create an empty file, at dist/js/libraries.min.js it isn't deleted as part of the gulp tasks, however if i move the call to del() outside the gulp tasks it is deleted, so that leads me to assume that its not as simple as a permissions issue, or path issues.
Any idea what I've done wrong?
PS: its on a windows box, running in an admin cmd window.
You were using the wrong signature for the task. The correct one is :
task([taskName], taskFunction)
see task signature
But your tasks look like this:
gulp.task('scripts', gulp.series('clean'), (done) => { // 3 parameters
Merely changing that to:
gulp.task('scripts', gulp.series('clean', (done) => {
...
}));
makes it work - I tested it. So now that task has only two parameters: a task name and a function. Yours had a task name plus two functions.
You would also need to change your default and clean tasks to this proper signature. Also you should call done() at the end of the task as you did with your cb().
Your new code uses task functions, which are better than named tasks for a number of reasons - but now you know what was wrong with your original code. The main body of your scripts task was never being run.
I never worked out what was wrong, but went direct to the doc's and started again (previous version was from a example)..
Works with the below (much simpler) script.
// // include plug-ins
var gulp = require('gulp');
var count = require('gulp-count');
var debug = require('gulp-debug');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var config = {
src: 'jspa-scada/dist/libraries/',
dest: 'jspa-scada/dist/js/',
outputfile: 'libraries.min.js'
}
function defaultTask(cb) {
del([config.dest + config.outputfile]);
// Include all js files but exclude any min.js files
var globs = [
config.src + '*.js',
'!' + config.src + '*.min.js'
];
return gulp.src(globs)
.pipe(debug())
.pipe(count('## files selected'))
.pipe(uglify())
.pipe(concat(config.outputfile))
.pipe(gulp.dest(config.dest));
cb();
}
exports.default = defaultTask
I'm setting up a Backbone project and I use Gulp to run some tasks. I have encountered a stdout maxBuffer error when running my task with Browserify and gulp-compressor. So, in my app.js I have the following:
var Backbone = require('backbone');
var _ = require('underscore');
var $ = require('jquery/dist/jquery');
Then I've written a task to compile the required libraries into one file, which I will use in my index.html like <script src="dist/bundle.min.js"></script>, and to minify that file using gulp-compressor. Here is the task:
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
compress = require('gulp-compressor'),
rename = require('gulp-rename');
gulp.task('browserify', function() {
gulp.src('app/javascripts/app.js')
.pipe(browserify({
insertGlobals: true,
debug: !gulp.env.production
}))
.pipe(compress())
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('dist'));
});
But every time I try to run the script it returns me
Error: Error: stdout maxBuffer exceeded
How could I solve that problem?
After some search in Google the Almighty I found an answer on gulp-compressor issue tracker. To solve this problem, one should give the following parameters to compress function:
// ...
.pipe(compress({
'executeOptions': {
maxBuffer: 10000*1024
}
}))
then run $ npm update and everything will work!
I'm using the del package in my gulpfile as part of a clean task.
Below are the the versions of things I'm using
Visual Studio 2015 Community
Node.js v2.11.3
gulp v3.9.0
del v2.0.2
This is an extract from my gulp file:
var gulp = require('gulp');
var del = require('del');
var config = require('./gulp.config')();
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('images', ['clean-images'], function () {
log('Copying and compressing the images');
return gulp
.src(config.images)
.pipe($.imagemin({optimizationLevel: 4}))
.pipe(gulp.dest(config.build + 'images'));
});
gulp.task('clean-images', function (done) {
clean(config.build + 'images/**/*.*', done);
});
function clean(path, done) {
log('Cleaning: ' + $.util.colors.blue(path));
del(path, done);
}
When I run the task images from the command prompt using gulp images the clean-images task executes but never finishes. It errors with the lines:
[16:10:45] Using gulpfile ~\Documents\Visual Studio 2015\Projects\**\Gulpfile.js
[16:10:46] Starting 'clean-images'...
[16:10:46] Cleaning: build/images/**/*.*
Process terminated with code 0.
As a result the rest of the images task doesn't execute.
The images task runs fine when I remove the clean-images dependency.
Don't suppose anyone has seen this issue before, and knows how to correct it?
Thanks
I think you've encountered the same error as this user : the del module doesn't use callbacks anymore, but promises. done is never called, so the clean and images task run concurrently, which causes an error.
You could just return from the clean method :
gulp.task('clean-images', function () {
return clean(config.build + 'images/**/*.*');
});
function clean(path) {
log('Cleaning: ' + $.util.colors.blue(path));
return del(path);
}
Whenever the appropriate files change I would like to bundle my tests and start karma, showing any failed tests.
I currently have the watch task:
gulp.task('default', ['browserify', 'css','runTests'], function () {
gulp.watch('./src/js/**/*.js', ['browserify']);
gulp.watch('./src/js/**/*.js', ['runTests']);
});
Which starts up the runTests.js
var testFile = [
'./src/components/tests/suite.js'
];
// bundle tests
var cmd = child.spawn('browserify', ['-e', './src/components/tests/suite.js', '-t', 'reactify', '-t']);
cmd.on('close', function (code) {
//cmd finished start karma
gulp.src(testFiles)
.pipe(karma({
configFile: 'karma.conf.js',
action: 'run'
}))
.on('error', function(err) {
throw err;
});
});
my console currently errors here:
[17:04:27] Starting 'runTests'...
[17:04:27] Finished 'runTests' after 2.73 ms
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn browserify ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
Process finished with exit code 1
I can get a basic command to work child = spawn("ls");
But not the browserify command, can anyone help?
You can use the browserify API within a gulp task. Look at substack/node-browserify#1170 for some tips on globbing with browserify. Then you can just include the output file in your karam config files array.
// Disclaimer: This code is untested
var files = require("glob").sync('./src/js/**/*.js');
files.push('./src/components/tests/suite.js');
var browserify = require("browserify")(files, {transform: 'reactify'});
// your can do more config on the browserify instance
// Run browserify bundle and output to a file
var myFile = require('fs').createWriteStream('myOutput.txt');
browserify.bundle().pipe(myFile);
I cannot figure out why I am getting a node ENOENT error, when running a simple task to clean out my vendor files.
My gulp task looks like this
var gulp = require('gulp');
var del = require('del');
module.exports = function(opt){
gulp.task('clean:vendor', function(cb){
return del(['src/vendor/'],cb)
});
}
When I run the command gulp clean:vendor against a file structure that looks like this:
gulpfile.js
src/vendor/js
src/vendor/css
I get this error from node, and I cannot figure out how to catch or fix.
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, open '/Users/aycollin/seed/src/vendor/js/bootstrap.js'