I am working on a project that uses gulp to concatenate compiled vue assets with other javascript assets.
When running gulp, all runs successfully.
However, now I need to add a watcher on the compiled vue file as show below.
gulp.task('watch', ['scripts'], function() {
gulp.watch('js/vue/compiled.js', { ignoreInitial: false });
});
While the watcher process seems to kickoff, it does not update when the compiled.js file gets updated. Any idea why this is?
Usually how I write gulp tasks is like this:
gulp.task('watch', function() {
gulp.watch('js/vue/compiled.js', ['scripts'], { ignoreInitial: false });
});
Instead of placing the gulp function to execute in gulp.task rather place it in gulp.watch. Something like this:
gulp.task('watch', function() {
gulp.watch('js/vue/compiled.js', ['scripts'], { ignoreInitial: false });
});
Related
I am trying to write a gulpfile as follows :
var gulp = require('gulp');
// other dependencies go here ....
// source of files
var inputs = require('./asset_source.js');
// a simple task
gulp.task('css', function () {
gulp.src(inputs.css)
.pipe(debug())
.pipe(plumber())
.pipe(maps.init())
.pipe(concatCss('libs.css'))
.pipe(maps.write('../srcmaps'))
.pipe(plumber.stop())
.pipe(gulp.dest('assets/css'));
});
// the watcher
gulp.task('watch', function () {
gulp.watch('./asset_source.js', ['css']);
});
// default task
gulp.task('default', ['browser-sync', 'watch']);
And the source of assets (asset_source.js) file is something like this :
module.exports = {
css: [
'path/to/a/file.css',
'path/to/another/file.css',
.......
.......
],
js: [
'path/to/a/file.js',
'path/to/another/file.js',
.......
.......
]
};
Now I run the app with by just typing gulp in the console and it starts in a browser thanks to browsersync. I have all the css,scss,js assets listed in the asset_source.js file which is in the same directory as the gulpfile.js. What I want to achieve is if I append or remove a value to/from either of the arrays in asset_source.js, the concerned task should run while the gulp is already running. In this case css should be running on any change to asset_source.js with its updated content.
But instead it doesnt do so. Even if there is a change in the asset_source file, gulp uses the initial content and runs the task. However if run gulp css in a separate terminal, it works.
Please help me where I am going wrong or if it is even possible. Thanks.
I have browsersync set up with gulp, html and css reloading is working just fine, but I've got a problem with javascript. When i launch browser-sync task and change some js, it only works as intended once. I've set up everything according to this official guide.
gulp.task('js', function () {
return gulp.src(['./app/*/*.js', './app/*.js'])
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('./build'));
});
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./app/"
}
});
gulp.watch('app/styles/*.scss', ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
gulp.watch(['./app/*/*.js', './app/*.js'], ['js-watch']);
});
console log
So, when i first change some javascript, it gets changed and the page is reloaded as intended - js-watch task runs js task and then reloads the page. But on the next runs, only js task is run.
I was googling this for about 2 hours before i decided to ask a question, so i hope this is not a duplicate. But just in case, sorry.
add .pipe(browserSync.stream()); in 'js' task after .dest()
gulp.task('js', function () {
return gulp.src(['./app/*/*.js', './app/*.js'])
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('./build'))
.pipe(browserSync.stream())
});
I am trying to watch Sass files and jade files for change. Both gulp.watch methods work on their own but not together?
gulp.task('compile', function() {
gulp.watch('src/assets/sass/*.sass', ['sass']);
gulp.watch('src/*.jade', ['jade']);
});
When i had mine setup i would have something like
gulp.task('watchSass', function() {
gulp.watch('src/assets/sass/*.sass', ['sass']);
});
gulp.task('watchJade', function() {
gulp.watch('src/*.jade', ['jade']);
});
gulp.task('compile',['watchSass', 'watchJade']);
I think it is to do with the fact that the gulp task dependencies are run asynchronously, where the two watch statements in your single task are run sequentially so the first watch statement blocks the second watch statement from being reached.
I'm using Gulp as my task runner, and gulp-ruby-sass to compile my sass files into css.
The error I'm getting on my gulp default task:
My default Gulp task:
gulp.task('default', ['delete', 'web_css', 'dash_css', 'web_js', 'dash_js']);
My 2 compile SASS tasks:
// Compile public SASS
gulp.task('web_css', function() {
return sass('client/website/_sources/sass/bitage_web.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/website/assets/css'));
});
// Compile dashboard SASS
gulp.task('dash_css', function() {
return sass('client/dashboard/_sources/sass/bitage_app.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/dashboard/assets/css'));
});
Both tasks above are virtually identically.
When I run the default task (gulp):
The website css compiles ok
All the js compiles ok
But then I get that error before the dash_css finishes, and the
css is not compiled :(
Additional notes:
If make a change in gulp watch the dash_css will compile just
fine.
If I run just gulp dash_css it also compiles just fine.
I only have this Errno::ENOENT bug when I run the default task.
Do you see anything strange above? Or have run into this issue before?
Use callback so that gulp knows when the task is complete:
gulp.task('delete', function(cb) {
del([
'client/website/assets/css/maps',
'client/website/assets/css/bitage_web.css',
'client/dashboard/assets/css/maps',
'client/dashboard/assets/css/bitage_app.css',
'client/website/assets/js/*',
'client/dashboard/assets/js/*'
], cb);
});
Make delete run before other tasks for example with run-sequence.
I've changed
gulp.task('web_css', function() {
return sass(....
to:
gulp.task('web_css', function() {
return gulp.src('
I need to minify automatically all files when some change occurs in my js or less files.
I have some Tasks for Minify my less files and js files called 'styles','services' and 'controlles'.
For minify this files i just execute this task and everything forks fine:
gulp.task('minify', ['styles', 'services','controllers']);
Instead run this task manually i want to do automatic in development mode. How i can do this?
What you need to do is run your project with nodemon
nodemon = require('gulp-nodemon');
Nodemon runs your code and automatically restart when your code changes.
So, for automatic minification use this Gulp Task:
gulp.task('watch', function() {
gulp.watch(pathLess, ['styles']);
gulp.watch(pathJs.services, ['services']);
gulp.watch(pathJs.controllers, ['controllers']);
});
And then setup nodemon for run your project
gulp.task('nodemon', function () {
nodemon({ script: 'server.js'})
.on('start', ['watch'], function () {
console.log('start!');
})
.on('change', ['watch'], function () {
console.log('change!');
})
.on('restart', function () {
console.log('restarted!');
});
})
Now if you type in prompt : gulp nodemon your server.js will run, and you will be able to develop with automatic minification.
I hope it helps