my gulp watch tasks causes an infinite loop in the terminal and it also creates a a lot more .min.js files than expected. I'm pretty new to gulp and any help pointing me in the right direction would help
Here my gulpfile:
/*
Required
*/
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
/*
Scripts Task
*/
gulp.task('scripts', function(){
gulp.src(['app/js/**/*.js', '!app/js/**/*.min.js]'])
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/js'));
});
/*
Watch Tasks
*/
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
});
/*
Default Task
*/
gulp.task('default', ['scripts', 'watch']);
You're watching for changes in the js directory, and your scripts task also puts the processed code into the js directory, which the watcher picks up and the cycle begins all over again.
You should probably put the processed files in a different directory than the source files, by changing this line: .pipe(gulp.dest('build/js'));
The alternative is to change your watcher to not watch the files with .min.js at the end, but I can see this getting really messy
Related
I am trying to convert my sass to compressed-css and javascript to uglified-js. And watch both scss and js changes
my code is working but when I tried saving a js file, it goes into a unstoppable loop.
Here is my code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('sass', function(done){
gulp.src('public/sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'})) // Using gulp-sass
.pipe(gulp.dest('public/stylesheets'))
done();
});
gulp.task('scripts', function(done){
gulp.src('public/javascripts/**/*.js')
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(gulp.dest('public/javascripts'))
done();
});
gulp.task('watch', function(){
//I made .scss and .js into an array so they will both be watched
gulp.watch(['public/sass/**/*.scss', 'public/javascripts/**/*.js' ], gulp.series('sass', 'scripts', function(done) {
done();
}))
})
Now when I run gulp watch it is working but then when I save a js file, I goes into a saving loop, It's saves and saves and saves nonstop.
I have made scss work with this code
gulp.task('watch', function(){
gulp.watch('public/sass/**/*.scss', gulp.series('sass', 'scripts', function(done) {
done();
}))
})
But I have no idea how I can make .js files be watched.
I searched google for possible answer but only find the older version solution. Is there a way I can do this with gulp4?
I also tried gulp.parallel but it still looped
Please help. Thanks
Your original code:
gulp.task('watch', function(){
//I made .scss and .js into an array so they will both be watched
gulp.watch(['public/sass/**/*.scss', 'public/javascripts/**/*.js' ], gulp.series('sass', 'scripts', function(done) {
done();
}))
})
should be
gulp.task('watch', function(done){
// added done above too
gulp.watch('public/sass/**/*.scss', gulp.series('sass') )
gulp.watch('public/javascripts/**/*.js', gulp.series('scripts') )
done();
})
Your code triggers both 'sass' and 'scripts' tasks when either a scss or js file is modified, which is wasteful (for example, the 'sass' task will start when a js file is altered but not actually do anything with that js file but will needlessly run the sass re-compilation although no scss file changed).
I solved this by doing this:
gulp.task('watch', function(){
//I added the src folder instead of the glob **(two asterisk)
gulp.watch(['public/sass/**/*.scss', 'public/javascripts/src/*.js'], gulp.series('sass', 'scripts', function(done) {
done();
}))
})
I don't know why this happened but it's working now
So I can compile scss to css fine.
However, whenever I change anything in my scss file it has no effect on the page unless I build styles.
My gulp file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']); // Sass watch
// gulp.watch('dist/css/main.css');
});
// Sass compiler
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass()) // Convert Sass to CSS
.pipe(gulp.dest('app/css'))
});
// Compile css files
gulp.task('styles', function () {
return gulp.src('app/css/**/*.css')
.pipe(concatCss('main.css'))
.pipe(gulp.dest('dist/css'));
});
/** Default builds **/
// Build
gulp.task('build', ['styles']);
// Watch and build changes
gulp.task('default', ['build', 'watch']);
My index.html file linked to my dist css file is this correct also?
<link rel="stylesheet" type="text/css" href="dist/css/main.css">
All that keeps happening is I gulp watch files okay but if I change anything (something simple like body background colour) nothing happens. Not even on hard refresh. I have to gulp build styles. I am new to gulp/learning but surely building styles after every change cannot be right?
Thank you for any suggestions. I know I asked about compiling, I worked out why that wasn't working, but I've been going around in circles with this one.
I think what happens is that the watch task of gulp is only compiling the css from sass, but not concatenating the css in dist/css/main.css.
Add the task styles to the watch method of gulp and try again:
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass', 'styles']); // Sass watch
});
Hope this helps! :)
I need some help, I've butchered what I had working while trying to add scss compilation and minification. I had scss working, but it made main.js not uglify. Then I switched some things and both don't work. This is my second day in Gulp, let alone .js.
It's throwing an error on the line after the last line (which is blank?) and SyntaxError: Unexpected end of input.
Here's the code: (and thanks)
/* Required */
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass');
/* Scripts Task */
gulp.task('scripts', function(){
gulp.src(['app/js/**/*.js', '!app/js/**/*min.js'])
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/js'));
});
/* Watch Task */
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
gulp.watch('app/scss/**/*.scss', ['sass']);
});
/* Gulp-Sass Task */
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('app/css'));
});
gulp.task('sass:watch', function() {
gulp.watch('app/sass/**/*.scss', ['sass']);
/* Default Task */
gulp.task('default', ['scripts', 'sass', 'watch']);
PS: Is there a better way of minifying my code that combines js and scss compiling?
You should use gulp-scss instead, I saw this when i visited gulp-scss's page
I found gulp-sass, but it doesn't seem to support actual sass, because the backend, node-sass is a port of libsass that has major limitations.
Also for minifying css why shouldn't you use gulp-clean-css ?
I've seen plenty of stackoverflow solutions to this, but none of the appear to work in my scenario.
My gulp watch appears to be watching the file but the output file is not being updated.
Running gulp works okay as it default is set to call the sass task, and the task successfully compiles my output css.
Here is my directory structure:
- css
- sass
* style.scss
* style.css
* gulpfile.js
and my gulpfile:
// include gulp
var gulp = require('gulp');
// include plugins
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var cssbeautify = require('gulp-cssbeautify');
var cssmin = require('gulp-cssmin');
// compile sass
gulp.task('sass', function () {
return gulp.src('./css/sass/*.scss')
.pipe(sass())
.pipe(cssbeautify())
.pipe(gulp.dest('css'));
});
// watch
gulp.task('watch', function () {
gulp.watch('./css/sass/*.scss', ['sass']);
});
// default task
gulp.task('default', ['sass']);
gulp watch gives me: (11:01 is when I saved the file)
[10:59:48] Using gulpfile ~/Sites/cla/8_0/web/intranet/reports/gulpfile.js
[10:59:48] Starting 'watch'...
[10:59:48] Finished 'watch' after 12 ms
[11:01:25] Starting 'sass'...
[11:01:25] Finished 'sass' after 24 ms
Any ideas as to why my output css isn't changing?
Many thanks!
It could be an sass synthax error issue, since you dont have any functionality in your sass taks no handle then.
Here is an example from my gulpfile
Try to add .on('error', sass.logError)), after your .pipe(sass()), here is a rough example:
gulp.task('sass',function(){
gulp.src('./src/sass/main.scss')
.pipe(sass().on('error', sass.logError))
});
Following this tutorial, I've setup a basic gulp config along with a .scss file that I want compiled into .css using gulp-sass. When I run gulp watch from the console, the watch task register fine, but nothing happens when I edit the .scss file, and I can't figure out why.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('watch', function() {
gulp.watch('sassFiles',['styles']);
});
terminal output:
shooshte#M:~/Webpages/CV2$ gulp watch
[20:38:40] Using gulpfile ~/Webpages/CV2/gulpfile.js
[20:38:40] Starting 'watch'...
[20:38:40] Finished 'watch' after 5.37 ms
You were passing 'sassFiles' (as a string) and not the sassFiles variable.
gulp.task('watch', function() {
gulp.watch(sassFiles,['styles']); // Removed '' around sassFiles
});
I also noticed you are passing the sassFiles variable into your styles task. I'm a bit foggy but I don't think this works and further more It may, as suggested, indicate a poor directory structure.
The suggested methods for how to structure a sass project vary, but all share one common factor. They suggest breaking up your sass into partials prefixed with an underscore
/styles
application.scss
_footer.scss
_header.scss
_sidebar.scss
And then importing them all into a single top level scss file. application.scss
#import "footer";
#import "header";
#import "sidebar";
You can then just tell the styles task to compile application.scss and all of the files referenced as imports will get pulled in automatically.
gulp.task('styles', function(){
gulp.src('assets/styles/sass/application.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});