There is a project, its structure:
I do run gulp watch, when changing sass-file everything works correctly , but when I change js-file - assembly going infinite.
gulpfile:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var compass = require('gulp-compass');
gulp.task('compress-js', function() {
return gulp.src([
'./www/js/jquery/**/*.js',
'./www/js/vendor/**/*.js',
'./www/js/lib/**/*.js',
'./www/js/common/app.js',
'./www/js/pages/**/*.js',
'./www/js/common/main.js',
'!./www/js/combine.js'
])
.pipe(concat('combine.js'))
.pipe(uglify())
.pipe(gulp.dest('./www/js/'));
});
gulp.task('compress-css', function() {
return gulp.src('./scss/**/*.scss')
.pipe(compass({
config_file: './scss/config.rb',
css: './www/css',
sass: './scss'
}))
.pipe(gulp.dest('./www/css/'));
});
gulp.task('watch', function() {
gulp.watch(['./scss/**/*.scss'], ['compress-css']);
gulp.watch(['./www/js/**/*.js'], ['compress-js']);
});
Tell me please, what is wrong here?
The problem seems in your gulp.watch
gulp.watch(['./www/js/**/*.js'], ['compress-js']);
When you concat the js files for the build you exclude combine.js but you take it as good for the watch so he loop
Related
i have trouble to use Gulp 4. My watch-task runs only one time, when detecting changes, inside my html-files.
Where is my mistake? Please help me to fix my gulpfile
Here is my code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer'),
rename = require('gulp-rename'),
inject = require('gulp-inject'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
babel = require('gulp-babel'),
browserify = require('gulp-browserify'),
clean = require('gulp-clean'),
sourcemaps = require('gulp-sourcemaps'),
htmlmin = require('gulp-html-minifier'),
browserSync = require('browser-sync');
var src = './src/',
dist = './dist/';
//####################################
// MINIFY HTML
gulp.task('html', function(){
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
});
//####################################
// WATCH
gulp.task('default', function(){
gulp.watch([src + '*.html'], gulp.series('html'));
});
When i run the html-task manually, i get the following warning:
The following task did not complete: html
Did you forget to signal async completion?
How can i solve this issue, too?
I solved my issue, with this code change, inside my html file:
gulp.task('html', done => {
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
done();
});
The Watch-Task works now
yesterday I've upgraded my Gulp to 4.0 in order to gain some speed while compiling styles for my project (they got big, right now on my Mac Pro 2016 I need to wait 19seconds)
After some digging I decided to add gulp-cached and gulp-remember to my build.
Here's my current gulpfile.js for the styles:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cached = require('gulp-cached'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
remember = require('gulp-remember'),
gs = gulp.series,
concat = require('gulp-concat'),
gp = gulp.parallel;
gulp.task('compile:styles', () => {
return gulp.src([
// Grab your custom scripts
'./assets/scss/**/*.scss'
])
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(cached('sass'))
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(remember('sass'))
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('styles'))
.on('change', function (event) {
console.log("event happened:"+JSON.stringify(event));
if (event.type === 'deleted') {
//delete from gulp-remember cache
remember.forget('sass', event.path);
//delete from gulp-cached cache
delete cache.caches['sass'][event.path];
}
});
});
gulp.task('watch', gp(
'watch:styles'
));
My issue here is that my build works well on first compilation which takes about 3 seconds, later on where ever I do a change it can see in which file I made that change, and it starting to compile, but the output file does not have the changes inside.
I think I am not getting something when it comes to gulp-cached and gulp-remeber. But at the end of the file you can see a function that are supposed to clean the caches once a change was made.
Can you please take a look at my code? Maybe you will have some advice.
Cheers!
### EDIT 26.08
I have encountered the following post while looking for a solution:
http://blog.reactandbethankful.com/posts/2015/05/01/building-with-gulp-4-part-4-incremental-builds/
I went with it accordingly with the following code (but the effect is same as in above example):
// Grab our gulp packages
var gulp = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
gs = gulp.series,
gp = gulp.parallel,
cache = require('gulp-memory-cache');
gulp.task('compile:styles', () => {
return gulp.src('./assets/scss/**/*.scss', {since: cache.lastMtime('sass')})
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(cache('sass'))
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('compile:styles'))
.on('change', cache.update('sass'));
});
gulp.task('build', gs(
'compile:styles',
'watch:styles'
));
I have created a complete gulpfile.js here:
https://gist.github.com/MkBeeCtrl/5a6a0900dba1c5d42dc7b6da211b3e95
With js files compilation included.
// Grab our gulp packages
var gulp = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
gs = gulp.series,
gp = gulp.parallel,
cached = require('gulp-cached'),
dependents = require('gulp-dependents');
gulp.task('compile:styles', () => {
return gulp.src('./assets/scss/**/*.scss')
.pipe(cached('sass'))
.pipe(dependents())
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({browsers: ['last 2 versions']}))
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('compile:styles'))
.on('change', function (event) {
console.log("event happened:"+JSON.stringify(event));
if (event.type === 'deleted') {
//delete from gulp-remember cache
//emember.forget('sass', event.path);
//delete from gulp-cached cache
delete cache.caches['sass'][event.path];
}
});
});
gulp.task('build', gs(
'compile:styles',
'watch:styles'
));
The above solution works the way I want, so if you want to produce separate CSS files from multiple imported files, you can go with it. It's not blazing fast solution but I have managed to save about 1 second when recompiling (already saved about 15s, when I started this topic, a build lasted 19 secs):
1st compile: ~3.5s
2nd or late: ~2.4s
You dont need to concate or order here as the whole order thing happens when you import scss files into you main file.
Try this one. I suppose it might do what you want to achieve:
'use strict';
const gulp = require('gulp');
const path = require('path');
const cached = require('gulp-cached');
const remember = require('gulp-remember');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
gulp.task('styles:compile', function() {
return gulp.src('assets/scss/**/*.scss', {since: gulp.lastrun('styles:compile')})
.pipe(sourcemaps.init())
//.pipe(cached('sass')) - a smarter but heavier alternative to since
.pipe(remember('sass'))
.pipe(concat('all.sass'))
.pipe(sass())
.pipe(autoprefixer({ browsers: ['last 2 versions'] }))
.pipe(sourcemaps.write())
.pipe(gulp.dest('assets/css/'));
});
gulp.task('styles:watch', function() {
var watcher = gulp.watch('assets/scss/**/*.scss', gulp.series('compile:styles'));
watcher.on('unlink', function(filepath) {
remember.forget('sass', path.resolve(filepath));
//delete cached.caches.sass[path.resolve(filepath)];
});
});
gulp.task('default', gulp.series('styles:compile', 'styles:watch'));
Install path plugin to resolve paths. Use 'unlink' event if you want to detect when a file gets deleted. since just checks dates which is faster compared to cached that reads and compares content. But cached is more reliable (for example, when you deleted and then returned the file using your IDE tools since will not work since the file will be returned again with its old date). Also check paths - I might have messed them up.
So consider the following gulp file:
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify = require("babelify");
var watch = require('gulp-watch');
gulp.task('make:engine', function() {
return browserify({entries: [
'./src/index.js'
]})
.transform("babelify")
.bundle()
.pipe(source('engine.js'))
.pipe(gulp.dest('dist/'));
});
gulp.task('make:example', function() {
return browserify({entries: [
'./examples/index.js'
]})
.transform("babelify")
.bundle()
.pipe(source('compiled-example.js'))
.pipe(gulp.dest('dist/example/'));
});
gulp.task('watch', ['make:engine', 'make:example'], function(){
return watch('*.js', ['make:engine', 'make:example']);
});
gulp watch spits out:
[15:06:01] Using gulpfile ~/Documents/ice-cream-engine/gulpfile.js
[15:06:01] Starting 'make:engine'...
[15:06:01] Starting 'make:example'...
[15:06:03] Finished 'make:example' after 1.57 s
[15:06:03] Finished 'make:engine' after 1.6 s
[15:06:03] Starting 'watch'...
In ANY js file, if I make an edit and save the file, the terminal doesn't update to say that it is making the engine or the examples.
The project directory looks as follows:
What am I doing wrong such that it wont actually re-compile on ANY JS file change?
According to your screenshot, the only .js file that matches the glob you have passed to watch is gulpfile.js.
If you want to watch all .js files under the src and example directories, you could use the following:
gulp.task('watch', ['make:engine', 'make:example'], function(){
return watch(['src/**/*.js', 'examples/**/*.js'], ['make:engine', 'make:example']);
});
The following gulp watch task isn't getting triggered when I change any LESS file in the project. Can anyone spot what I'm doing wrong? Most the answers here say to NOT use the watch-less module, which I'm not. It's supposed to listen to changes in any LESS file in the project and when one changes, go to the app.less file to regenerate the CSS file (app.less has #includes to all the files).
var watch = require("gulp-watch");
var less = require("gulp-less");
gulp.watch(paths.source + "**/*.less", function(event){
gulp.src(paths.source + paths.assets + paths.less + "app.less")
.pipe(less().on("error", console.log))
.pipe(gulp.dest(paths.dev + paths.css));
});
Here are some issues:
require("gulp-watch"); is useless here. Actually gulp.watch is a core API of gulp.
The gulpfile.js consists of several gulp tasks.
Run gulp watch in your terminal.
For example:
var gulp = require('gulp');
var path = require('path');
var less = require('gulp-less');
var paths = {
// your paths
};
gulp.task('styles', function () {
return gulp.src(paths.source + paths.assets + paths.less + "app.less")
.pipe(less({
// paths to be used for #import directives
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function() {
gulp.watch('less/**/*.less', ['styles']);
});
I am using gulp for the first time and obviously got 2 problems as follows
First here goes my gulp file, it is very basic nothing fancy yet.
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('controllers', function() {
return gulp.src('controllers/*.js')
.pipe(concat(EVER_FILE))
.pipe(gulp.dest('dist'))
.pipe(rename(EVER_FILE))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['scripts','controllers']);
Question 1: How do i get the controllers task to concat and minify each file on its own?
Question 2: How do i create a task that can add a random number in the index.html Javascript files as in <script src='js/controller.js?RandomNumber'></script>