I have a gulp task to copy all html files from source to destination.
html gulp task
var gulp = require('gulp');
module.exports = function() {
return gulp.src('./client2/angularts/**/*.html')
.pipe(gulp.dest('./client2/script/src/'));
};
and gulp watch which start running whenever I change .Html file it swill start html gulp task.
watch.ts
var gulp = require('gulp');
var watch = require('gulp-watch');
var sq = require('run-sequence');
module.exports = function () {
var tsClientHtml = [
'client2/**/*.html'
];
watch(tsClientHtml, function () {
gulp.run('html');
});
};
Its going in infinite loop, means whenever I am changing in html file its ruining html gulp task again and again...
Can someone please suggest what is wrong in this watch.ts
You are watching the dest folder. Try changing tsClientHtml to './client2/angularts/**/*.html'.
Related
I am a beginner to Javascript and Gulp. Am learning this based on a udemy course in which Gulp 3 is being used, and I've been looking at docs to convert the code to Gulp 4. It's been fun so far since I am learning more when I am doing the conversions myself, but am stuck on this one. Wonder if you guys can offer some advice.
Issue: When I split the gulpfile.js into separate files to organise my files better, it starts throwing errors. Code below.
styles.js
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
function styles(cb) {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(gulp.dest('./app/temp/styles'));
cb();
}
exports.styles = styles;
watch.js
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
function cssInject(cb) {
return gulp.src('./app/temp/styles/styles.css')
.pipe(browserSync.stream());
cb();
}
function browserSyncReload(cb) {
browserSync.reload();
cb();
}
function watch(cb) {
browserSync.init({
notify: false,
server: {
baseDir: "app"
}
});
watch('./app/index.html', browserSyncReload);
watch('./app/assets/styles/styles.css', gulp.series(cssInject, styles));
cb();
}
exports.browserSyncReload = browserSyncReload;
exports.watch = watch;
gulpfile.js
var stylesTasks = require('./gulp/tasks/styles.js'),
watchTasks = require('./gulp/tasks/watch.js');
exports.watch = watchTasks.watch;
exports.styles = stylesTasks.styles;
exports.browserSyncReload = watchTasks.browserSyncReload;
When I run "gulp watch", this is what I get.
error
$ gulp watch
[21:14:28] Using gulpfile ~/Projects/travel-site/gulpfile.js
[21:14:28] Starting 'watch'...
internal/async_hooks.js:195
function emitInitNative(asyncId, type, triggerAsyncId, resource) { ^
RangeError: Maximum call stack size exceeded
(Use `node --trace-uncaught ...` to show where the exception was thrown)
I found another post with almost identical code, but with a different error - which happened to be one of the errors i was getting earlier as well, and have followed the solution mentioned in that post - and that's when I get this error. Here's the link to the post.
Any help is much appreciated. Thanks for your time.
I have a full article that shows many how to regarding going from gulp3 to gulp4, I think you are going to find everything you need there
But basically, I think you need to take a look at these modules :
gulp-task-loader-recursive
gulp4-run-sequence
require-dir
Then, from a gulp.js perspective, you can end up with something like this :
// gulpfile.js
global.config = require('./gulp/config/config.json');
require('events').EventEmitter.prototype._maxListeners = 1000;
require('require-dir')('./gulp/tasks/styles');
require('require-dir')('./gulp/tasks/watch');
//... etc ...
So you would be able to then create your styles task and export it :
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
function styles(cb) {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(gulp.dest('./app/temp/styles'));
cb();
}
const stylesTask = task('styles', styles);
exports.stylesTask = stylesTask;
You can then validate its recognized by gulp :
gulp --tasks
If you correctly see your styles tasks, you should now be able to run your task by running :
gulp styles
Repeat those steps for the watch task.
Answering my own question feels wierd, but I found the solution after playing with it for couple of days. See below.
I needed to import styles into watch.js, and not gulpfile.js. That was my first mistake. To do this, I added the below line to watch.js
var styles = require('./styles').styles;
Then my gulpfile.js only needed two lines
gulpfile.js
var watchTask = require('./gulp/tasks/watch').watch;
exports.default = watchTask;
I also removed the variable gulp, instead created variables for src and dest. So, the rest of the code looked like below.
styles.js
var {src, dest} = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');
const styles = function (cb) {
return src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(dest('./app/temp/styles'));
cb();
}
exports.styles = styles;
watch.js
var styles = require('./styles').styles;
var {src, series, watch} = require('gulp'),
browserSync = require('browser-sync').create();
const cssInject = function (cb) {
return src('./app/temp/styles/styles.css')
.pipe(browserSync.stream());
cb();
}
const reload = function (cb) {
browserSync.reload();
cb();
}
const watchTask = function (cb) {
browserSync.init({
notify: false,
server: {
baseDir: "app"
}
});
watch('./app/index.html', reload);
watch('./app/assets/styles/styles.css', series(cssInject, styles));
cb();
}
exports.watch = watchTask;
Hence resolved! hope this helps someone else.
I have a simple gulpfile.js, that defines only two tasks, buildLess and watchFiles:
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');
function buildLess(done) {
const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
gulp.src('./public/less/*.less')
.pipe(fileFilter)
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./public/css/'))
;
done();
};
function watchFiles() {
gulp.watch(['public/less/*.less'], gulp.series('build-less'));
// gulp.watch(['./public/less/*.less'], gulp.series(buildLess));
};
gulp.task('build-less', buildLess);
gulp.task('watch-files', watchFiles);
The first one ($ gulp build-less) is working fine. The watchFiles ($ gulp watch-files) can be started and doesn't cause any errors, but changes on the public/less/style.less are ignored.
What is wrong at this gulpfile.js and how to get the watch-files task working?
The gulp.series API allows you to pass a string of a previously registered task. In your code, you haven't registered build-less yet.
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');
function buildLess(done) {
const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
gulp.src('./public/less/*.less')
.pipe(fileFilter)
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./public/css/'))
;
done();
};
gulp.task('build-less', buildLess);
function watchFiles() {
gulp.watch(['public/less/*.less'], gulp.series('build-less'));
// gulp.watch(['./public/less/*.less'], gulp.series(buildLess));
};
gulp.task('watch-files', watchFiles);
I would note that Gulp does not recommend using the gulp.task API anymore to register tasks, but instead to use exports.
Secondly, you don't need gulp-watch, as gulp now comes with its own gulp.watch method (which you are already using).
Lastly, you should make sure to your correctly signaling async completion in your buildLess function. Below, I've changed that function to return a Stream, rather than calling a done() callback since as you have it written, you have a race condition where done() may be called before the Less compilation has finished.
var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');
function buildLess() {
const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
return gulp
.src('./public/less/*.less')
.pipe(fileFilter)
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./public/css/'));
}
exports['build-less'] = buildLess;
function watchFiles() {
gulp.watch(['public/less/*.less'], buildLess);
}
exports['watch-files'] = watchFiles;
Overall, I'd go through Gulp's documentation. They recently updated their website, and updated their documentation along with it. Going through that might clear up some other questions you may be having.
I need to run one gulp task that contains 3 or 4 another tasks. The problem is (steps):
In task #1 I need download file from remote server
After download completed, I need to run task #2
And when task #2 is done I need to run task #3
This is my code:
var gulp = require('gulp'),
decompress = require('gulp-decompress'),
download = require("gulp-download"),
ftp = require('gulp-ftp'),
gutil = require('gulp-util');
gulp.task('default', function(){
console.log("Hello gulp");
});
var src_download = [
"https://wordpress.org/latest.zip"
];
gulp.task('download', function(){
download(src_download)
.pipe(gulp.dest("./"));
});
gulp.task('unzip-wp', function(){
return gulp.src('latest.zip')
.pipe(decompress({strip: 1}))
.pipe(gulp.dest('./'));
});
gulp.task('install', ['download', 'unzip-wp']);
As you can see, when I am trying to run 'install' task - it will run 'unzip-wp' before 'download' has been completed...
What am I doing wrong?
I need to run 'unzip-wp' task only after 'download' task has been completed.
Thanks
You should have the 'unzip-wp' task wait for the 'download' task to finish. To make sure the 'download' task is really finished also add a return statement to that task, i.e. this would do what you're looking for:
var gulp = require('gulp'),
decompress = require('gulp-decompress'),
download = require("gulp-download"),
ftp = require('gulp-ftp'),
gutil = require('gulp-util');
gulp.task('default', function () {
console.log("Hello gulp");
});
var src_download = [
"https://wordpress.org/latest.zip"
];
gulp.task('download', function () {
return download(src_download)
.pipe(gulp.dest("./"));
});
gulp.task('unzip-wp', ['download'], function () {
return gulp.src('latest.zip')
.pipe(decompress({strip: 1}))
.pipe(gulp.dest('./'));
});
gulp.task('install', ['unzip-wp']);
Very simple there is no need of unzip task it will also unzip into wordpress folder for the sake that it will not mess your other files.
gulp.task('download', function(){
download(src_download)
.pipe(decompress({strip: 1}))
.pipe(gulp.dest('./wordpress'));
});
gulp.task('default', ['download']);
So consider the following gulp file:
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify = require("babelify");
var watch = require('gulp-watch');
gulp.task('make:engine', function() {
return browserify({entries: [
'./src/index.js'
]})
.transform("babelify")
.bundle()
.pipe(source('engine.js'))
.pipe(gulp.dest('dist/'));
});
gulp.task('make:example', function() {
return browserify({entries: [
'./examples/index.js'
]})
.transform("babelify")
.bundle()
.pipe(source('compiled-example.js'))
.pipe(gulp.dest('dist/example/'));
});
gulp.task('watch', ['make:engine', 'make:example'], function(){
return watch('*.js', ['make:engine', 'make:example']);
});
gulp watch spits out:
[15:06:01] Using gulpfile ~/Documents/ice-cream-engine/gulpfile.js
[15:06:01] Starting 'make:engine'...
[15:06:01] Starting 'make:example'...
[15:06:03] Finished 'make:example' after 1.57 s
[15:06:03] Finished 'make:engine' after 1.6 s
[15:06:03] Starting 'watch'...
In ANY js file, if I make an edit and save the file, the terminal doesn't update to say that it is making the engine or the examples.
The project directory looks as follows:
What am I doing wrong such that it wont actually re-compile on ANY JS file change?
According to your screenshot, the only .js file that matches the glob you have passed to watch is gulpfile.js.
If you want to watch all .js files under the src and example directories, you could use the following:
gulp.task('watch', ['make:engine', 'make:example'], function(){
return watch(['src/**/*.js', 'examples/**/*.js'], ['make:engine', 'make:example']);
});
I have the following glupfile.js, it works fine but I need to run the default gulp task when a files in folder.
How to change my script in order to support gulp watch?
var gulp = require('gulp');
var jscs = require('gulp-jscs');
var jshint = require('gulp-jshint');
var noop = function () { };
var stylish = require('gulp-jscs-stylish');
var folders = [
'./a/**/*.js',
'./b/**/*.js',
'./c/**/*.js',
'a.js',
'b.js',
'c.js',
'd.js'
];
gulp.task('default', function () {
gulp.src(folders)
.pipe(jshint()) // hint (optional)
.pipe(jscs()) // enforce style guide
.on('error', noop) // don't stop on error
.pipe(stylish.combineWithHintResults()) // combine with jshint results
.pipe(jshint.reporter('jshint-stylish')); // use any jshint reporter to log hint and style guide errors
});
Try adding a gulp task as given below
gulp.task('watch',function(){
gulp.watch(folders,['default']);
});
gulp.task('default',['watch']);
Basically it watches the folders for any change and if any change happens, it executes your default task.