i downloaded livereload extension but it's not working, here's the error.
Error: watching ./src/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
var
gulp = require("gulp"),
livereload = require("gulp-livereload");
gulp.task("reload-css", function() {
gulp.src('./src/*.css')
.pipe(livereload());
});
gulp.task("default", function() {
livereload.listen();
gulp.watch('./src/*.css', ['reload-css']);
});
So what should i do now ?
it looks like you're using gulp 4, but write gulp 3 syntax. Try
gulp.watch('./src/*.css', gulp.series('reload-css'))
Check out the gulp 4 docs.
This post highlight the differences in the new gulp.
Related
I am super new to using Node.js, NPM and all these modern tools for better productivity and workflow.
So here are the details:
Node version - v8.10.0
Gulp CLI version - 2.0.1
Gulp Local version - 3.9.1
NPM version - 5.6.0
Windows 7
Node.js installed in D:/ProgramFiles
I've tried using gulp and it does work wonderfully with this script
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('default',function(){
console.log('Gulp task created');
});
gulp.task('html' , function() {
console.log('Something useful here');
});
gulp.task('watch', function() {
watch('/app/index.html', function() {
gulp.start('html');
});
});
So typing gulp does respond with the default task message. Typing gulp html does respond too with a console message. However, when i type gulp watch, it does work with following output.
Starting 'watch'...
Finished 'watch' after 7.99 ms
But whenever i make changes and save the index file, the cmd doesn't update. I've tried using Git Bash and other terminals. I've even installed previous node versions and tried solving this issue using those but no luck so far.
I tried editing the dependencies to an older version but that doesn't work too.
If anyone of you can help, I'll be thankful.
Updated with callback method to end process for a graceful exit and not use CTRL-C.
gulp.task('watch',function(){
gulp.watch('./data/index.html', function(){
gulp.start(['someOtherGulpTask']);
});
});
gulp.task('someOtherGulpTask', function () {
gulp.src('./test/sometest.js')
.pipe(gulpmocha(),setTimeout(function() {
cb();
}, 5000))
});
function cb(){
process.exit(1);
}
Original answer below
The order of execution of gulp tasks are -
the default task gets executed and then the subsequent ones unless the task
to be executed is specifically mentioned in the cmdline call to gulp as you
have mentioned - "gulp watch".
you can specify the order in the beginning of the gulpfile like
gulp.task('default', ['watch']);
or, you can start a task explicitly like so,
gulp.task('default',function(done){
console.log('Gulp task created');
gulp.start('watch');
done();
});
done is the callback that allows your waiting task to complete which is missing in your gulp file. Below is the complete gulp file that you can use to execute the watch task as you require.
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('default',function(done){
console.log('Gulp task created');
gulp.start('watch');
done();
});
gulp.task('html' , function() {
console.log('Something useful here');
});
gulp.task('watch', function() {
watch('./data/index.html', function() {
console.log('Some changes done');
});
});
gulp.task('watch', function () {
gulp.watch('./data/index.html', ['html']);
});
Avoid gulp.start, it is not documented or recommended.
I am learning to use gulp and have followed through a tutorial. I am trying to concat js files my code is:
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task["concatScripts", function() {
return gulp.src(['js/jquery.js',
'js/foundation.equalizer.js', 'js/foundation.reveal.js'])
.pipe(concat("app.js"))
.pip(gulp.dest("js"));
}];
my error code is:
$ gulp concatScripts
[21:33:21] Using gulpfile ~\Documents\Treehouse notes\website-optimization\work\gulpfile.js
[21:33:21] Task 'concatScripts' is not in your gulpfile
[21:33:21] Please check the documentation for proper gulpfile formatting
Can anyone see where I am going wrong? Also it did not state to, however I linked the gulp.js file to write the code for gulp in to my html, is this correct?
Thank you in advance.
Check the documentation at gulp-concat and the code example: Instead of calling gulp.task[' you should make a function call:
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('concatScripts', function() {
return gulp.src('./js/*.js') // <-- Or an array of files
.pipe(concat('app.js'))
.pipe(gulp.dest('./js/'));
});
I'm trying to generate a bundle.js file with a Gulp task
var gulp = require('gulp'),
gutil = require('gulp-util'),
wrench = require('wrench'),
conf = require('./webpack.config'),
webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server');
// Webpack
gulp.task('wp', function() {
return gulp.src('./assets/scripts/entry.js')
.pipe(webpack(conf))
.pipe(gulp.dest('./assets/build1'));
});
However, I get TypeError: dest.on is not a function when I try to run it:
Here's the folder directory:
The error occurs because webpack doesn't work natively with gulp streams. Naturally the returned object by webpack() doesn't include dest.on which is specific to gulp.
Either use gulp-webpack or follow the official docs on how to use webpack with gulp
Sample code taken straight out of the official docs which uses webpack-stream:
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('src/entry.js')
.pipe(webpack())
.pipe(gulp.dest('dist/'));
});
I have one strange issue running gulp task for compiling browserify + coffee, react & bower. Here is my task:
var browserify = require('gulp-browserify');
var coffeeReactify = require('coffee-reactify');
var debowerify = require('debowerify');
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('coffee', function() {
return gulp.src('./app/assets/javascripts/application.coffee', { read: false })
.pipe(browserify({
debug: true,
transform: [coffeeReactify, debowerify],
extensions: ['.coffee']
})).on('error', function(error) {
console.log('----');
console.log('Compile error');
console.log();
console.log(error.message);
}).pipe(rename('application.js'))
.pipe(gulp.dest('./public/'));
});
When I run this task on usual ubuntu's gnome-terminal, all is going well, file is created and worked. But in atom editor terminal coffee isn't compiling. I get this error. So, how can I fix that?
[10:38:15] Using gulpfile ~/my_project/Gulpfile.js
[10:38:15] Starting 'coffee'...
----
Compile error
ENOTDIR: not a directory, open '/usr/share/atom/resources/app.asar/package.json'
[10:38:15] Finished 'coffee' after 57 ms
Other tasks, like gulp slim or gulp sass are working well.
The key to solve this issue was to migrate from gulp-browserify to browserify package.
\Hey guys I'm totally stuck with this one.
Basically I want on my local dev to be able to have gulp watch my src js files files and transform them with babel and output them to my dist folder and then after that's done have pm2 restart node to load the latest changes.
The problem I'm having is I can't for the life of me figure out how to add a callback to watch so that the call to restart pm2 only happens after babel has done its magic transforming the files.
var gulp = require("gulp");
var babel = require("gulp-babel");
var pm2 = require("pm2");
var watch = require("gulp-watch");
var plumber = require("gulp-plumber");
var SRC = "src/**/*js";
var DIST = "dist/";
function restartPM2() {
//restart pm2 code in here
}
gulp.task("default", function () {
return gulp.src(SRC)
.pipe(watch(SRC))
.pipe(plumber())
.pipe(babel())
.pipe(plumber.stop())
.pipe(gulp.dest(DIST));
// somewhere in here need a call back after babel has transformed
// the code and saved it to dist/ to then call restartPM2
});
Any help would be greatly appreciated!
First, you're not watching the right way. Then, you should keep things separated. That's how I'd do:
var paths = {
babel: './somedir'
}
//basic babel task
gulp.task('babel', function() {
return gulp.src(paths.babel)
.pipe(babel())
.pipe(gulp.dest('./'))
})
//see below for some links about programmatic pm2
gulp.task('pm2', function(cb) {
pm2.connect(function() {
pm2.restart('echo', function() {
return cb()
})
})
})
gulp.task('default', ['babel']) //I don't restart pm2 with the default task but you could
//the watch task
gulp.task('watch', function() {
//their could be more watchers here ofc
gulp.watch(paths.babel, ['babel', 'pm2'])
})
If you launch gulp watch, it'll watch the paths.babel and, on change, execute both tasks (babel, pm2).
If you only execute gulp (or gulp babel in this example), it'll launch the appropriate task. You'd be able to launch gulp pm2 too.
Ressources:
pm2 programmatic doc
gulp doc