Gulp tasks does not work sequentially - gulp

I have 4 tasks to clean the build, build styles & javascripts and to create asset manifest. My default task looks like this:
gulp.task('default', function(callback) {
runSequence('clean', ['styles', 'scripts'], 'version', callback);
});
So, this works out perfectly but the 'version' tasks. It does not create anything and has no effect.
gulp.task('version', function() {
gulp.src(utils.dst('**/*'))
// create content hashed filenames
.pipe(rev())
.pipe(gulp.dest(utils.dst()))
// create asset manifest
.pipe(rev.manifest())
.pipe(gulp.dest(utils.dst()))
});
If I run do the gulp clean; gulp styles; gulp scripts; gulp version; the version tasks will create the desired asset manifest.
This is the output of running the default task:
Starting 'default'...
Starting 'clean'...
Finished 'clean' after 6.87 ms
Starting 'styles'...
Finished 'styles' after 7.63 ms
Starting 'scripts'...
Finished 'scripts' after 2.96 ms
Starting 'version'...
Finished 'version' after 2.25 ms
Finished 'default' after 22 ms
Do anyone see the mistake I do? Maybe the build assets are not there yet when I run the version task, but that's why I made the tasks run sequentially.
Any suggestions how I could solve the problem?

You have to return the stream like so :
gulp.task('version', function() {
return gulp.src(utils.dst('**/*'))
// create content hashed filenames
.pipe(rev())
.pipe(gulp.dest(utils.dst()))
// create asset manifest
.pipe(rev.manifest())
.pipe(gulp.dest(utils.dst()))
});
Otherwise gulp can't know if your task is finished or not !

Related

Struggling to get gulp v4 to watch tasks with babel plugin

When I try to gulp watch, I get the following error:
[15:46:56] Task never defined: watch
[15:46:56] To list available tasks, try running: gulp --tasks
Here are my functions from gulpfile.js.
function watchChanges(cb) {
watch(['assets/js/*.js'], parallel(buildSiteJS));
watch(['assets/scss/style.scss', 'assets/scss/**/*.scss'], parallel(compileStyleSCSS));
watch(['**/*.php'], parallel(reloadPage));
cb();
}
With the ending export statement like:
exports.default = parallel(serveBrowserSync, mainTasks, watchChanges);
I'm not sure if the syntax is incorrect causing the 'task never defined' error and I've tried a lot of searching online and not got anywhere with it.
Let me know if you need to see more of the gulpfile.js.
Gulp: 4.0.2
Gulp Babel: 8.0.0

Gulp watch keeps firing nonstop even though there aren't any change

Just like the title, I currently have a nasty problem with Gulp watch, that keeps on compiling my files even though there aren't any change made.
For instance, this is a piece of my 'watch' task
gulp.task('watch', function() {
gulp.watch(jsIn, ['babel']);
}
And my 'babel' task, just to compile my scripts and move them to dist folder
const jsIn = ['dev/scripts/*.js', 'dev/scripts/**/*.js'],
jsOut = 'dist/scripts';
gulp.task('babel', function() {
gulp.src(jsIn)
.pipe(babel())
.on('error', gutil.log)
.pipe(gulp.dest(jsOut))
.pipe(connect.reload()); //yes I use gulp-connect to live reload my files.
});
When I run gulp watch it works normally, and then this keeps on happening
TRUONGs-MacBook-Pro:code sdsmnc$ gulp watch
[14:48:31] Using gulpfile /Volumes/SDSMNC_BU/2018/wildlife/code/gulpfile.js
[14:48:31] Starting 'watch'...
[14:48:31] Finished 'watch' after 14 ms
[14:48:32] Starting 'babel'...
[14:48:32] Finished 'babel' after 14 ms
[14:48:34] Starting 'babel'...
[14:48:34] Finished 'babel' after 1.95 ms
[14:48:34] Starting 'babel'...
[14:48:34] Finished 'babel' after 1.5 ms
[14:48:37] Starting 'babel'...
[14:48:37] Finished 'babel' after 1.18 ms
[14:48:39] Starting 'babel'...
[14:48:39] Finished 'babel' after 1.07 ms
[14:48:41] Starting 'babel'...
[14:48:41] Finished 'babel' after 1.03 ms
[14:48:42] Starting 'babel'...
[14:48:42] Finished 'babel' after 1.73 ms
[14:48:44] Starting 'babel'...
[14:48:44] Finished 'babel' after 1.04 ms
I practically use the same gulpfile.js for all of my projects, the old ones work fine, but somehow in this new project I get this problem. I tried to delete the node_modules folder and reinstall all the dependencies, even use the node_modules of my old projects but can't fix the problem.
Any help please...?

EACCES: permission denied on gulp css minify, same src and dest

I have a gulp task to build up everything which runs for dev (works fine). On release gulp task we do the same but also tack on a bundle task which also minifies the css.
I want to just minify the css inline, meaning the same src and dest for the file; however, I am getting the below error when running.
Error: EACCES: permission denied, open
I don't think I'm hitting any race conditions since my build task shows as finished before the minify starts
[15:11:48] Finished 'build_client_lib' after 3.31 s
[15:11:48] Starting 'build'...
[15:11:48] Finished 'build' after 1.67 μs
[15:11:48] Starting 'minify-css'...
[15:11:48] 'minify-css' errored after 344 ms
The tasks in question are:
gulp.task('release', callback => {
gulpSequence('clean_packages', 'build', 'client_lib_bundle')(callback)
});
gulp.task('client_lib_bundle', ['minify-css'], () => {
});
gulp.task('minify-css', () => {
return gulp.src('build/client_lib/**/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('build/client_lib'));
});
It works fine is I specify an alternate dest path, but I'd prefer not to do that. How can I resolve this access issue?
Turns out the package I was using gulpSequence caused this, and a slew of other items, to run in an awkwardly async manner. Changing to the npm package run-sequence cleared all this up and ensures everything is running in the correct order.

gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead

I have an error with my gulpfile. Can anybody help me?
It works previously. But after I added gulp-watch plugin it crashes.
So what I need to use?
Here is my Gulpfile.js.
Here is a log:
azat#pc:~/git/lasttest$ gulp
[18:01:25] Using gulpfile ~/git/lasttest/gulpfile.js
[18:01:25] Starting 'default'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[18:01:25] Starting 'server'...
[18:01:25] Finished 'server' after 18 ms
[18:01:25] Finished 'default' after 37 ms
events.js:85
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE
at exports._errnoException (util.js:746:11)
at Server._listen2 (net.js:1156:14)
at listen (net.js:1182:10)
at Server.listen (net.js:1267:5)
at ConnectApp.server (/home/azat/git/lasttest/node_modules/gulp-connect/index.js:57:19)
at new ConnectApp (/home/azat/git/lasttest/node_modules/gulp-connect/index.js:37:10)
at Object.module.exports.server (/home/azat/git/lasttest/node_modules/gulp-connect/index.js:170:12)
at Gulp.<anonymous> (/home/azat/git/lasttest/gulpfile.js:112:11)
at module.exports (/home/azat/git/lasttest/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/azat/git/lasttest/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
Just use gulp's dependency system built in to the watch method.
// default depends on 'server' so that the server is started before
// the watches are started
gulp.task('default', ['server'], function() {
// run jade whenever files in src/jade change
gulp.watch('src/jade/**', ['jade']);
// run images whenever files in src/images change
gulp.watch('src/images/**/*', ['images']);
});
I'm not sure you need gulp-batch here unless you are running something that changes many images at once.

Jekyll, critical CSS, HTML minify in one gulp task?

I have a website based on Jekyll and I want to make it as fast as possible. My goal is to have a gulp task that builds the Jekyll site, generates the critical CSS and minifies the HTML.
Part of my gulpfile looks something like this:
gulp.task("jekyll", function (gulpCallBack){
var spawn = require("child_process").spawn;
var jekyll = spawn('jekyll', ["build"], {stdio: "inherit"});
jekyll.on("exit", function(code) {
gulpCallBack(code === 0 ? null : "ERROR: Jekyll process exited with code: "+code);
});
});
gulp.task("html", function() {
gulp.src("./_site/index.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site"))
gulp.src("./_site/*/*.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site/./"))
});
gulp.task("critical", function() {
critical.generate({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
minify: true,
extract: true,
width: 320,
height: 480
});
critical.inline({
base: '_site/',
src: 'index.html',
dest: 'index.html',
minify: true
});
})
If I run the tasks separately, gulp jekyll, then gulp html and finally gulp critical everything works fine and as I want to. Since I am lazy I do not want to run three tasks manually each time. My idea was to run them synchronously/one after the other by using the following code.
gulp.task("jekyll", function (gulpCallBack){};
gulp.task("html", ["jekyll"], function() {};
gulp.task("critical", ["html"], function() {};
I thought, I just could run gulp critical which waits for the html task to finish which waits for the jekyll task to finish. The site got build and minified but the critical CSS is not injected. The task run in the correct order.
➜ jonas.re git:(master) ✗ gulp critical
[19:21:18] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:21:18] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:21:18] Finished 'jekyll' after 528 ms
[19:21:18] Starting 'html'...
[19:21:18] Finished 'html' after 5.37 ms
[19:21:18] Starting 'critical'...
[19:21:18] Finished 'critical' after 1.63 ms
Again, by running them manually after each other, it works perfectly.
I heard of runSequence but I have to return a stream which I have no idea of to do that for the jekyll task (if that is even possible?). And maybe the error something different since this works:
➜ jonas.re git:(master) ✗ gulp jekyll
[19:27:49] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:49] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:27:50] Finished 'jekyll' after 549 ms
➜ jonas.re git:(master) ✗ gulp html
[19:27:54] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:54] Starting 'html'...
[19:27:54] Finished 'html' after 5.56 ms
➜ jonas.re git:(master) ✗ gulp critical
[19:27:57] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:57] Starting 'critical'...
[19:27:57] Finished 'critical' after 1.66 ms
I would be very thankful for any help. You can have a look for my whole gulpfile here.
The problem come from critical. I get it working like this :
_config.yml
As we need style.scss to be parsed in order to generate a css for crititical.
Remove /css/style.scss from the exclude array.
style.scss
./_sass path is useless a it is the default path for Jekyll sass processor.
In order to be processed, this file needs an empty front matter.
---
---
#import "_assets/fonts.scss";
#import "_assets/mixins.scss";
#import "_assets/reset.scss";
#import "_assets/colors.scss";
#import "_assets/syntax-highlighter.scss";
#import "_modules/header.scss";
#import "_modules/content.scss";
_includes/head.hmtl
Critical needs a link to original style sheet.
Remove the css loading script and replace it with
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
The loading script will be inserted by critical.
gulpfile.js
You can now chain yours tasks. Note that I've changed the critical method to generateInline.
gulp.task("jekyll", function (gulpCallBack){
...
gulp.task("html", ["jekyll"], function() {
...
gulp.task("critical", ["html"], function() {
critical.generateInline({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
htmlTarget: 'index.html',
minify: true,
extract: true,
width: 320,
height: 480
});
})
Bim !
It seems that there is not really a way to run gulp tasks synchronous. But your shell is able to run commands synchronous with the && operator.
I now use a gulp module called gulp-shell. Here is how my code looks:
gulp.task('build', shell.task([
'gulp jekyll && gulp critical && gulp html'
]));
So I am able to just run gulp build to run the gulp tasks jekyll, critical and html in order. Though this works, I am not really happy with this solution. If anybody knows a better solution, please let me know.
I typically use the _includes folder within Jekyll to do the inlining for me. All you have to do is gulp.dest('_includes') — you can call gulp.dest() multiple times in a row.
Sample task in gulpfile
Then add a line to your main page template in Jekyll:
<style type="text/css">{% include main.min.css %}</style>
See the Jekyll source code in context