I've got this gulp file
const gulp = require('gulp')
const sass = require('gulp-sass')
const cleanCSS = require('gulp-clean-css')
const rimraf = require('rimraf')
const concat = require('gulp-concat')
gulp.task('clean', function(cb) {
rimraf('./dist/*', cb)
})
gulp.task('sass', function(cb) {
gulp.src('./src/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./dist'))
console.log('before')
cb(undefined)
})
gulp.task('minify', function(cb) {
gulp.src('./src/**/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('./dist'))
console.log('before')
cb(undefined)
})
gulp.task('build:css', ['sass', 'minify'], function() {
gulp.src('./dist/**/*.css')
.pipe(concat('style.min.css'))
.pipe(gulp.dest('./dist'))
console.log('after')
})
gulp.task('build', ['clean'], function() {
gulp.start('build:css')
})
gulp.task('build:watch', function () {
gulp.watch('./src/**/*.scss', ['build'])
})
But when I run build:watch
[11:26:18] Using gulpfile C:\dev\web\ikea_design\gulpfile.js
[11:26:18] Starting 'build:watch'...
[11:26:18] Finished 'build:watch' after 16 ms
[11:26:24] Starting 'clean'...
[11:26:24] Finished 'clean' after 11 ms
[11:26:24] Starting 'build'...
[11:26:24] Starting 'sass'...
before
[11:26:24] Finished 'sass' after 12 ms
[11:26:24] Starting 'minify'...
before
[11:26:24] Finished 'minify' after 2.27 ms
[11:26:24] Starting 'build:css'...
after
[11:26:24] Finished 'build:css' after 1.16 ms
[11:26:24] Finished 'build' after 25 ms
even if it displays the two befores before the after, style.css.min doesn't get created. That's strange since the css files should have already been saved in the dist folder by the time concat gets invoked.
What's wrong?
Edit
I've run gulp-debug inside of build:css and it shows 0 items in the pipe
Related
I have a problem with my gulp, I don't know how to explain it, but you will understand the problem when you see it, basically, I think my gulp is duplicating the task and therefore the execution can take a while, but if I finish the gulp and execute it again, the problem does not happen the first time it is compiled, but over time it is repeated more and more (first doubles, then 4x, 8x and so on)
my gulp:
var gulp = require('gulp'),
//Js
babel = require('gulp-babel');
uglify = require('gulp-uglify'),
filesJs = './js/edit/*.js',
outputJs = './js',
//Sass
sass = require('gulp-sass'),
filesCss = './css/**/*.+(scss|sass)',
outputCss = './css';
const {
watch
} = require('gulp');
//Uglify
gulp.task('uglify', function () {
gulp.src(filesJs)
.pipe(babel({presets: ['#babel/preset-env']}))
.pipe(uglify())
.pipe(gulp.dest(outputJs));
});
const watcherJS = watch([filesJs]);
watcherJS.on('change', function (path, stats) {
console.log(`File ${path} was changed`);
return gulp.watch(filesJs, gulp.series('uglify'));
});
//Sass
gulp.task('sass', function () {
return gulp.src(filesCss)
.pipe(sass({
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest(outputCss));
});
const watcherCSS = watch([filesCss]);
watcherCSS.on('change', function (path, stats) {
console.log(`File ${path} was changed`);
return gulp.watch(filesCss, gulp.series('sass'));
});
//Run/Watch
gulp.task('default', gulp.parallel('uglify', 'sass'));
my terminal after a save the .sass file once
File css\style.sass was changed
[09:43:18] Starting 'sass'...
[09:43:18] Starting 'sass'...
[09:43:18] Starting 'sass'...
[09:43:18] Starting 'sass'...
[09:43:33] Finished 'sass' after 15 s
[09:43:33] Finished 'sass' after 15 s
[09:43:33] Finished 'sass' after 15 s
[09:43:33] Finished 'sass' after 15 s
It is almost certainly your use of the chokidar watch functionality. Your code won't even run for me. And you don't need that complexity. I suggest getting rid of
const watcherJS = watch([filesJs]);
watcherJS.on('change', function (path, stats) {
console.log(`File ${path} was changed`);
return gulp.watch(filesJs, gulp.series('uglify')); // this is very strange, must be wrong
});
const watcherCSS = watch([filesCss]);
watcherCSS.on('change', function (path, stats) {
console.log(`File ${path} was changed`);
return gulp.watch(filesCss, gulp.series('sass'));
});
and replacing with:
gulp.task('watchFiles', function () {
gulp.watch(filesCss, gulp.series('sass'));
gulp.watch(filesJs, gulp.series('uglify'));
});
and using
gulp.task('default', gulp.series('uglify', 'sass', 'watchFiles'));
I'd like to create a watcher to watch some files and compile them.
I have two tasks :
minCss
compile
I'd like to execute compile in first and wait the end before executing minCss... But it seem's not working.
My code :
var scssToCompile = [
'./public/sass/themes/adms/adms.scss',
'./public/sass/themes/arti/arti.scss',
'./public/sass/themes/avantage/avantage.scss',
'./public/sass/themes/basique/basique.scss',
'./public/sass/themes/mairie/mairie.scss',
'./public/sass/themes/vehik/vehik.scss',
'./public/sass/themes/concept/concept.scss',
'./public/sass/themes/news/news.scss',
'./public/sass/components/*.scss',
'./public/sass/_functions.scss',
'./public/sass/_settings.scss',
'./public/sass/app.scss',
'./public/sass/bottom.scss'
];
gulp.task('compile', function(){
return gulp.src(scssToCompile)
.pipe(sassGlob())
.pipe(sass({includePaths: ['./public/sass']}).on('error', function(err) {
cb(err);
}))
.pipe(gulp.dest('./public/stylesheets'));
});
gulp.task('minCss', function() {
return gulp.src('public/stylesheets/themes/**/*.css')
.pipe(minifyCss())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('public/build/css'));
});
// my watcher
gulp.task('watch', function(){
gulp.watch(scssToCompile, ['compile', 'minCss']);
});
Results :
[15:21:36] Using gulpfile C:\xampp\htdocs\gulpfile.js
[15:21:36] Starting 'watch'...
[15:21:37] Finished 'watch' after 153 ms
[15:21:41] Starting 'compile'...
[15:21:46] Starting 'minCss'...
[15:21:46] Finished 'minCss' after 6.42 μs
[15:21:48] Finished 'compile' after 6.44 s
I start it off with
gulp sync
and get
[17:14:23] Starting 'scripts'...
[17:14:23] Finished 'scripts' after 43 ms
[17:14:23] Starting 'sync'...
[17:14:23] Finished 'sync' after 20 ms
[BS] Access URLs:
--------------------------------------
Local: http://localhost:(my port)
External: http://(my internal IP address)
--------------------------------------
UI: http://localhost:(myport+n)
UI External: http://(my internal IP address)
--------------------------------------
[BS] Serving files from: public
The browser loads up the page.
I save a file and it works. Terminal output :
[17:17:22] Starting 'scripts'...
[17:17:22] Finished 'scripts' after 17 ms
[17:17:22] Starting 'scripts-watch'...
[BS] Reloading Browsers...
I save the file again (or save a different file)
[17:18:38] Starting 'scripts'...
[17:18:38] Finished 'scripts' after 8.99 ms
Note theres no Reloading Browsers message. The browser does not reload. Stopping gulp and manually reloading the page DOES reflect the change.
My gulpfle :
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var react = require('gulp-react');
var minifyCSS = require('gulp-minify-css');
var browserSync = require('browser-sync').create();
gulp.task('less', function() {
return gulp.src('dev/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(rename('styles.min.css'))
.pipe(gulp.dest('public/css'))
});
gulp.task('scripts', function() {
return gulp.src('dev/js/*.js')
.pipe(rename('scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
gulp.task('build', function() {
return gulp.src('dev/components/**')
.pipe(concat('components.min.js'))
.pipe(react())
.pipe(uglify())
.pipe(gulp.dest('public/js'))
});
// Default Task
gulp.task('default', function() {
gulp.start('less');
gulp.start('scripts');
gulp.start('build');
});
gulp.task('scripts-watch', ['scripts'], browserSync.reload);
gulp.task('less-watch', ['less'], browserSync.reload);
gulp.task('build-watch', ['build'], browserSync.reload);
gulp.task('sync', ['scripts'], function() {
browserSync.init({
server: {
baseDir: "public",
index : "index.htm"
}
});
gulp.watch('dev/js/*.js', ['scripts-watch', browserSync.reload]);
gulp.watch('dev/less/*.less', ['less-watch', browserSync.reload]);
gulp.watch('dev/components/**', ['build-watch', browserSync.reload]);
});
Using chrome on ubuntu if that matters.
I have set up gulp so that it will reload when the gulpfile is modified. That basic process is working, but for some reason it seems the old tasks are not being terminated properly.
var gulp = require('gulp');
var less = require('gulp-less');
var spawn = require('child_process').spawn;
gulp.task('default', function(){
var p;
if(p)
p.kill();
p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});
gulp.task('watch', ['styles', 'watch-styles', 'watch-gulp']);
gulp.task('styles', function(){
return gulp.src('./**/*.less')
.pipe(less())
.pipe(gulp.dest('./'))
});
gulp.task('watch-styles', ['styles'], function(){
gulp.watch('./**/*.less', ['styles']);
});
gulp.task('watch-gulp', ['styles'], function(){
gulp.watch('./gulpfile.js', ['default']);
});
That is a basic gulpfile that demonstrates the problem. When I tweak that gulpfile to cause it to reload I receive this in the console:
[11:21:02] Starting 'default'...
[11:21:02] Finished 'default' after 5.25 ms
[11:21:02] Using gulpfile ~/repo/gulp-reload/gulpfile.js
[11:21:02] Starting 'styles'...
[11:21:02] Finished 'styles' after 34 ms
[11:21:02] Starting 'watch-styles'...
[11:21:03] Finished 'watch-styles' after 669 ms
[11:21:03] Starting 'watch-gulp'...
[11:21:03] Finished 'watch-gulp' after 1.83 ms
[11:21:03] Starting 'watch'...
[11:21:03] Finished 'watch' after 2.92 μs
Then modifying a less file within the directory gives this output
[11:21:24] Starting 'styles'...
[11:21:24] Finished 'styles' after 8.95 ms
[11:21:24] Starting 'styles'...
[11:21:24] Finished 'styles' after 2.92 ms
Each subsequent restart seems to lead to an additional call to styles, as if the old watchers are still there.
I created a small repo on Github with this example project as well.
In this task:
gulp.task('default', function(){
var p;
if(p)
p.kill();
p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});
p is never defined, because you always create a new variable when you call that function. Also, you don't have a pointer to your own process which you want to kill. A safer way would be to end all the other watchers by hand:
gulp.task('watch-styles', ['styles'], function(){
var watcher = gulp.watch('./**/*.less', ['styles']);
watchers.push(watcher);
});
gulp.task('watch-gulp', ['styles'], function(){
var watcher = gulp.watch('./gulpfile.js', ['default']);
watchers.push(watcher);
watcher.on('change', function(){
watchers.forEach(function(el){
el.end();
})
})
});
I was working on a new project at home last week and now I am in the office I am having no luck with Gulp.
There are no errors when I run Gulp but it isn't creating any files, I tried using Gulp-tap to see if anything was getting piped but its not. I am sure I am in the correct cwd and the file exists, but I have no luck. The task is also been run, confirmed by console.log'ing.
C:\Users\Jonathan\Documents\GitHub\ITMS-Backend>gulp
[11:02:16] Using gulpfile ~\Documents\GitHub\ITMS-Backend\Gulpfile.js
[11:02:16] Starting 'lint'...
[11:02:16] Starting 'sass'...
[11:02:16] Starting 'global-scripts'...
[11:02:16] Starting 'polymer'...
[11:02:16] Finished 'polymer' after 4.4 ms
[11:02:16] Finished 'lint' after 23 ms
[11:02:16] Finished 'global-scripts' after 14 ms
[11:02:16] Finished 'sass' after 19 ms
[11:02:16] Starting 'default'...
[11:02:16] Finished 'default' after 4.53 µs
My Gulp file as of current
var bower_root = 'public/components/'
webcomponents_dir = 'public/webcomponents';
var gulp = require('gulp');
var fs = require('fs');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var vulcanize = require('gulp-vulcanize');
var polymer_modules = [
"core-elements/core-elements.html",
"paper-elements/paper-elements.html"
];
// Lint Task
gulp.task('lint', function() {
return gulp.src('app/assets/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('app/assets/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/css'));
});
// Concatenate & Minify JS
gulp.task('global-scripts', function() {
return gulp.src('app/assets/js/*.js')
.pipe(concat('global.js'))
.pipe(gulp.dest('public/js'))
.pipe(rename('global.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('app/assets/js/*.js', ['lint', 'global-scripts']);
gulp.watch('app/assets/scss/*.scss', ['sass']);
});
gulp.task('polymer', function() {
// Move Polymer JS File
gulp.src("polymer/polymer.min.js", {cwd: bower_root})
.pipe(gulp.dest("public/js/"));
// Move webcomponents file
gulp.src(bower_root + "webcomponentsjs/webcomponents.min.js")
.pipe(gulp.dest("public/js/"));
// CSS Polymer is shipped with
gulp.src("polymer/layout.html", {cwd: bower_root})
.pipe(gulp.dest(webcomponents_dir));
// Vulcanise
gulp.src(polymer_modules, {cwd: bower_root})
.pipe(vulcanize({
dest: './public/webcomponents',
strip: true
}))
.pipe(gulp.dest(webcomponents_dir));
});
// Default Task
gulp.task('default', ['lint', 'sass', 'global-scripts', 'polymer']);