Develop Reference

Using Gulp to Minify and Auto Update a CSS File

I have a Gulp task that minifies my CSS in one folder and then pipes it to another folder.
const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");
gulp.task("minify-css", () => {
return (
gulp
.src("./css/**/*.css")
.pipe(cleanCSS())
.pipe(gulp.dest("minified"))
);
});
The command gulp minify-css works perfectly. I don't want to have to continually type that command in the terminal tho.
I want the code below to watch my CSS file and when it changes I want the minify-css task to run and update my minified file but it doesn't work:
gulp.task("default", function(evt) {
gulp.watch("./css/**/*.css", function(evt) {
gulp.task("minify-css");
});
});
Any ideas on why this doesn't work? Thank you in advance!

The problem lies in the area where you are calling gulp.task('minify-css') inside the gulp.watch callback function. That code does not actually invoke the minify-css task, but rather spawns an anonymous task as pointed by you in your logs. Instead gulp.watch should invoke a function which internally performs the minify-css job.
The other issue is probably the syntax changes that happened in gulp-4. They are not many but can be confusing.
I've managed to fix the issue and it works. Here is the updated code for gulpfile.js below:
const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");
function minifyCSS() {
return (
gulp
.src("./css/*.css")
.pipe(cleanCSS())
.pipe(gulp.dest("minified"))
);
}
gulp.task("minify-css", minifyCSS);
gulp.task("watch", () => {
gulp.watch("./css/*.css", minifyCSS);
});
gulp.task('default', gulp.series('minify-css', 'watch'));
Hope this helps.

How to setup jade includes with gulp-jade

I am currently using gulp-jade and I am struggling on how to setup Jade includes in my gulpfile.js.(For clarification, I am referring to this here http://jade-lang.com/reference/includes/) The following is the code in my gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var jade = require('gulp-jade');
var jshint = require('gulp-jshint');
var fileinclude = require('gulp-file-include');
var reload = browserSync.reload;
//compile jade to html
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./app/jade/*.jade')
.pipe(jade({
locals: YOUR_LOCALS
}))
.pipe(gulp.dest('./dist/'))
});
//reload files, once jade compilation happens
gulp.task('jade-watch', ['templates'], reload);
//Sass task for live injecting into all browsers
gulp.task('sass', function () {
gulp.src('./app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css'))
.pipe(reload({stream: true}));
});
//Separate task for the reaction to js files make change even without compilation and what not
gulp.task('compress', function() {
return gulp.src('./app/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('js-watch', ['compress'], reload);
//Serve and watch the scss/jade files for changes
gulp.task('default', ['sass', 'templates', 'compress'], function () {
browserSync({server: './dist'});
gulp.watch('./app/**/*.jade', ['jade-watch']);
gulp.watch('./app/scss/*.scss', ['sass']);
gulp.watch('./app/js/*.js', ['js-watch']);
});
I know it is quite a bit to parse through. I am hoping it is a standard something, that won't take too long. If you are interested in seeing the entire file structure, it can be seen at my github here https://github.com/CharlieGreenman/Gulp-with-foundation-and-sass
Thank you, and any help would be more than appreciated!

I wrote a Gulp plugin that simplifies your includes by allowing you to add some arbitrary paths to resolve includes and extends to, so you don't have to worry so much about relative pathing. Take a look: https://github.com/tomlagier/gulp-jade-modules

Turns out it was really simple. There were one thing I was doing wrong
I was using includes ../includes/head instead of include ../includes/head (using includes actually worked for me in grunt, upon further research I saw I was using it wrong for gulp.).

Multiple gulp files and inheriting tasks from other gulpfiles.js using require

I am trying to require a gulpfile (someGulpfile.js) in my own gulpfile (gulpfile.js) from where I run the gulp command. When I try to use the tasks defined in someGulpfile it throws an error on console saying Task 'default' is not in your gulpfile even though I just did require('./someGulpfile'); in my gulpfile.js
How can I use the tasks defined in someGulpfile? What is causing this issue?
I found out that this somewhat works but it does not output every task that is run (for example it does not output, Starting sometask, Finished sometask, Starting default, ...) and if there is an error it does not show the error and where it happened but errors out in the gulp library code where it has trouble formatting the error output.
//gulpfile.js
var gulp = require('gulp');
gulp.tasks = require('./someGulpfile').tasks;
//someGulpfile.js
var gulp = require('gulp');
gulp.task('sometask', function() {});
gulp.task('default', ['sometask']);
module.exports = gulp;

Could try something like this:
gulpfile.js
require("./gulp/tasks/build-js.js")();
require("./gulp/tasks/build-css.js")();
./gulp/tasks/build-js.js
var gulp = require("gulp");
module.exports = function() {
gulp.task("js", function() {
return gulp.src("./app/**/*.js")
.pipe();
//etc.
}
}
./gulp/tasks/build-css.js
var gulp = require("gulp");
module.exports = function() {
gulp.task("css", function() {
return gulp.src("./app/style/*.css")
.pipe();
//etc.
}
}
This will let you modularize your gulp tasks into different folders.

gulp watch doesn't watch

Following is my gulpfile.js. There are a couple of more tasks in it and all are working fine - but the last task, watch doesn't.
I've tried every possible combination of paths and files and what so ever, but still I don't have luck. I've read many answers on this here, but couldn't solve my problem. I tried to run gulp.watch with and without requiring gulp-watch, tried several different approaches on how to set up the task and so on and so on...
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var watch = require('gulp-watch');
gulp.task('application', function() {
return browserify('./public/resources/jsx/application.js')
.transform(babelify, { stage: 0 })
.bundle()
.on('error', function(e){
console.log(e.message);
this.emit('end');
})
.pipe(source('appBundle.js'))
.pipe(gulp.dest('./public/resources/jsx'));
});
gulp.task('watch', function() {
gulp.watch('./public/resources/jsx/project/*.js',['application'])
});
Can someone suggest a solution?
EDIT:
Here's the console output:
michael#michael-desktop:/opt/PhpstormProjects/app_april_2015$ gulp watch
[23:05:03] Using gulpfile /opt/PhpstormProjects/app_april_2015/gulpfile.js
[23:05:03] Starting 'watch'...
[23:05:03] Finished 'watch' after 13 ms

You should return watch:
gulp.task('watch', function() {
return gulp.watch('./public/resources/jsx/project/*.js',['application'])
});
watch is an async method, so the only way Gulp can know that something is happening is if you return a promise, which watch does.
Edit
As #JMM stated, watch doesn't return a Promise. It returns an EventEmitter.

gulp watch copying files twice to different locations

Since yesterday something strange has started happening with my gulp-watch task. Afaik, all I did was change the destination but I can reproduce with the simple gulpfile posted below:
I have a file structure like this:
src/html/stuff/file.html
src/js/something/file.js
Whenever there is a change I want it relflected in the build folder but when I run the gulp watch:stuff below I get the following output:
build/html/stuff/file.html
build/stuff/file.html
build/js/something/file.js
Where is that extra build/stuff/file.html file coming from?
What is wrong my watch function wrong?
gulpfile
var gulp = require('gulp');
var watch = require('gulp-watch');
gulp.task('watch:stuff', function () {
var pattern = ['src/html/**/*.html', 'src/js/**/*.js'];
gulp.src(pattern, { base : './src/' })
.pipe(watch({glob: pattern, emit : 'all', verbose: true},
function(files) {
files.pipe(gulp.dest('./build'));
}
)
);
});
Using gulp(3.8.8), gulp-watch(0.7.0)

remove the base option, probably It confuses the gulp.src somehow, I don't know.