I got problems with gulp on the command-line when running tasks with dependencies (in-sequence and parallel). This might be specific to my environment, I need help were to look or how to make it any more verbose.
What happens:
I run gulp bundle
It starts:
Starting 'build'
Starting 'unbundle'
Finished 'unbundle' after 11ms
Starting 'clean'
Then I am back on my command prompt. No error message, the exit code was even 0.
Then I run it again: gulp bundle
Starting 'build'
Starting 'unbundle'
Finished 'unbundle'
Starting 'clean'
Finished 'clean'
Starting 'build-system'
Starting 'build-html'
Starting 'build-css'
Starting 'build-style'
Starting 'build-locales'
Finished 'build-css'
Finished 'build-locales'
Finished 'build-style'
Finished 'build-html'
Finished 'build-system'
Finished 'build'
Starting 'bundle'
Finished 'bundle'
This time it worked. We I want to do gulp bundle again I have to run it twice again.
There are other tasks which involve even more dependencies where I must enter the same command 4x before it works.
Everytime exit code 0. Even with flag -LLLL I do not get anything out of it. Gulp version is 3.9.1.
I have collected all affected tasks from the different files and combined their requires.
var gulp = require('gulp');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var paths = require('../paths');
var assign = Object.assign || require('object.assign');
var notify = require('gulp-notify');
var typescript = require('gulp-tsb');
var exec = require('child_process').exec;
var print = require('gulp-print');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var vinylPaths = require('vinyl-paths');
var del = require('del');
var bundler = require('aurelia-bundler');
var bundles = require('../bundles.js');
var sassOptions = {
outputStyle: 'expanded'
};
var autoPrefixerOptions = {
browsers: ['last 2 versions', '> 1%']
};
var typescriptCompiler = typescriptCompiler || null;
gulp.task('build-system', function() {
if(!typescriptCompiler) {
typescriptCompiler = typescript.create(require('../../tsconfig.json').compilerOptions);
}
return gulp.src(paths.dtsSrc.concat(paths.source))
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(typescriptCompiler())
.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: '/src'}))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-html', function() {
return gulp.src(paths.html)
.pipe(changed(paths.output, {extension: '.html'}))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-css', function() {
return gulp.src(paths.css)
.pipe(changed(paths.output, {extension: '.css'}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(paths.output));
});
gulp.task('build-style', function () {
return gulp.src(paths.style)
.pipe(changed(paths.outputStyle, { extension: '.css' }))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(paths.outputStyle));
});
gulp.task('build-locales', function () {
return gulp.src(paths.locales)
.pipe(changed(paths.output, { extension: '.json' }))
.pipe(gulp.dest(paths.output));
});
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html', 'build-css', 'build-style', 'build-locales'],
callback
);
});
gulp.task('clean', ['unbundle'], function() {
return gulp.src([paths.output])
.pipe(vinylPaths(del));
});
var config = {
force: true,
baseURL: './wwwroot',
configPath: './wwwroot/config.js',
bundles: bundles.bundles
};
gulp.task('bundle', ['build'], function() {
return bundler.bundle(config);
});
gulp.task('unbundle', function() {
return bundler.unbundle(config);
});
Every task returns a gulp pipe, a Promise of call the callback method.
I have no idea why this happens and why calling gulp multiple times solves the problem once (and then you must call it multiple times again).
To have the question documented with its answer:
The problem was a breakage in the pipe model with the clean task.
I solved it using another approach, here simply calling del which returns a Promise (which is returned).
gulp.task('clean', ['unbundle'], function() {
return del([paths.output]);
});
Related
I know there are many questions with new gulp version . I had to change my gulpfile.js and now when I run it , it only executes once . I tried using return on gulp.watch function but it does nothing .
Here is my code :
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var iconfont = require('gulp-iconfont');
var async = require('async');
var consolidate = require('gulp-consolidate');
var sassLint = require('gulp-sass-lint');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
gulp.task('sass-lint', function () {
return gulp.src('app/scss/**/*.s+(a|c)ss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
});
gulp.task('watch', gulp.series('sass'), function (){
gulp.watch('app/scss/**/*.scss', gulp.series(gulp.parallel('sass' , 'sass-lint' )));
});
gulp.task('build', function (callback) {
runSequence(['sass'],
callback
)
});
gulp.task('iconfont', function(done){
var iconStream = gulp.src(['app/images/svg/*.svg'])
.pipe(iconfont({
fontName: 'icons',
}));
async.parallel([
function handleGlyphs(cb) {
iconStream.on('glyphs', function(glyphs, options) {
gulp.src('conf/_iconfont-template.scss')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: 'icons',
fontPath: '../fonts/',
className: 's'
}))
.pipe(gulp.dest('app/scss/utilities/'))
.on('finish', cb);
});
},
function handleFonts (cb) {
iconStream
.pipe(gulp.dest('app/fonts/'))
.on('finish', cb);
}
], done);
});
Here is what i get in a terminal :
Your problem is mainly here:
// your version
gulp.task('watch', gulp.series('sass'), function (){
// should be:
gulp.task('watch', gulp.series('sass', function (done) {
gulp.task now takes only two arguments.
Other comments:
This part of your 'watch' task is strange:
gulp.series(gulp.parallel('sass' , 'sass-lint' )));
gulp.series is doing nothing there, presumably you want :
gulp.parallel('sass' , 'sass-lint' ));
Final 'watch' task with done callback to signal async completion.
gulp.task('watch', gulp.series('sass', function (done){
gulp.watch('app/scss/**/*.scss', gulp.parallel('sass' , 'sass-lint'));
done();
}));
You don't need the run-sequence plugin anymore. You could change the 'build' task to use gulp.series instead.
I use gulp and growl. I create this gulpfile.js:
var gulp = require("gulp");
var less = require("gulp-less");
var notifier = require('node-notifier');
var notify = require("gulp-notify");
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('less', function() {
var trete;
console.log(trete);
gulp.src('css/main.less')
.pipe(less())
.on('error', function(err){
trete = err.message;
notifier.notify({
'title': 'My notification',
'message': trete
});
return false;
})
.pipe(notify("Всё заебись!"))
.pipe(gulp.dest('css/'))
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('browser-sync', function() {
browserSync.init(['css/*.css', 'js/*.js'], {
server: {
baseDir: './'
}
});
});
gulp.task('watch', function() {
gulp.watch('css/**', ['less']);
gulp.run('less');
gulp.watch(['*.html'], ['bs-reload']);
});
gulp.task('default', ['less', 'browser-sync', 'watch']);
When I run gulp, growl shows two notification and browser-sync twice reload page. Maybe I do something wrong?
You run 'less' twice in the 'default' task. Its the first dependent task, will run, then it runs again in the 'watch' task because of gulp.run.
Remove gulp.run in 'watch' task.
Add 'less' as dependent task for 'watch' task instead.
You probably want to stream your styles instead of full page reload so pipe less through this at the end.
.pipe(gulp.dest(cssPath))
.pipe(browserSync.stream());
Your task do not return their streams, they will never finish due to that. Tasks should always return a stream or take in a done-callback and call that if they are async.
var gulp = require("gulp");
var less = require("gulp-less");
var notifier = require('node-notifier');
var notify = require("gulp-notify");
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('less', function() {
return gulp.src('css/main.less')
.pipe(less())
.on('error', function(err){
notifier.notify({
'title': 'My notification',
'message': err.message
});
return false;
})
.pipe(notify("Всё заебись!"))
.pipe(gulp.dest('css/'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', ['less'], function() {
browserSync.init({
server: {
baseDir: './'
}
});
});
gulp.task('watch', ['less'], function() {
gulp.watch('css/**', 'less');
gulp.watch('*.html').on('change', reload);
});
gulp.task('default', ['browser-sync', 'watch']);
I have the following Gulp task:
var gulp = require('gulp'),
nodemon = require('gulp-nodemon'),
livereload = require('gulp-livereload'),
sass = require('gulp-ruby-sass'),
jasmine = require('gulp-jasmine'),
app = require('./app'),
server = require('http').createServer(app);
gulp.task('test', function () {
return server.listen(3000, function() {
gulp.src('spec/test.js')
.pipe(jasmine());
});
});
When the tests are done running I'd like to do a server.close() to kill the server. (Otherwise the command just hangs.)
But I don't know how to tell when the tests are done running. How can I do this?
Here's what I ended up doing. The significant difference is the on callback, I suppose.
gulp.task('test', function() {
server.listen(3000);
return gulp.src('spec/test.js')
.pipe(jasmine())
.on('end', function () {
server.close();
});
});
I have this Gulp task in my 'gulpfile.js' which utilises the gulp-ruby-sass plugin. When I run it, it tasks at least 8 seconds to compile. The equivalent script in Grunt can take less than 1 second so I am confused as to what is causing the lag.
'use strict';
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
// Load plugins
var plugins = require('gulp-load-plugins')();
var path = {
src: function (path) {
return './assets/' + path;
},
dist: function (path) {
return './web/' + path;
},
};
// Styles
gulp.task('styles', function () {
return gulp.src(path.src('styles/**/*.scss'))
.pipe(plugins.rubySass({sourcemap: false, style: 'expanded', quiet: true }))
.pipe(plugins.autoprefixer('last 2 versions', '> 1%', 'ie 8'))
.pipe(gulp.dest(path.src('styles')))
.pipe(minifyCSS())
.pipe(plugins.rename({suffix: '.min'}))
.pipe(gulp.dest(path.dist('styles')))
.pipe(plugins.size());
});
I swapped out gulp-ruby-sass for gulp-sass and I can now compile in under a second. Marvellous!
I'm having a strange problem with Gulp. Here is my Gulp file:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('default', function() {
gulp.run('main');
gulp.watch('sass/*.scss', function() {
gulp.run('main');
})
});
gulp.task('main', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
// .pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}))
;
});
The script runs correctly the first time. But on second and subsequent runs of the same script (without Gulp having stopped running), it puts it in the SASS directory as a subitem of the .SCSS file. Any idea why this is happening. I'm not sure how to even debug.
Try the following code.
It uses the correct syntax for gulp, replacing gulp.run() with the supported function arguments.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('main', function() {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}));
});
gulp.watch('sass/*.scss', ['main']);
gulp.task('default', ['main']);
Found the answer, the gulp.dest keeps the folder structure of gulp.src, to override you can set the base property of the src, this will exclude whatever folder the base is set to
example gulp.src('./sass/' + '**/*.scss', {base: 'sass'}) this now excludes sass from the destination, no longer appending sass to your gulp.dest
See and this look at gulp.src