gulp watch ends too soon - javascript

I'm getting the same problem as this guy.
My terminal looks like:
$ gulp watch
[23:59:03] Using gulpfile gulpfile.js
[23:59:03] Starting 'watch'...
[23:59:03] Finished 'watch' after 8.68 ms
http://jsbin.com/poxoke/1/edit?js
Why can't I get it to watch for file changes? Why does it end so quickly?
Thanks!

you could try adding gulp-util
var util= require('gulp-util');
and then inside your sass task add the line to report any error, if this is one, to console output.
gulp.task('sass', function () {
return gulp.src('assets/scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: ['sass'].concat(bourbon),
outputStyle: 'compressed'
}))
.on('error', util.log)
.pipe(sourcemaps.write())
.pipe(gulp.dest('assets/css'));
});
If gulp-sass throws an error this can get "consumed" by the pipe but still causes the whole stream to terminate. So if you add the line to explicitly catch them and then log them out you can see if this is in fact the case.
Your watch task is dependant on the 'sass' task and if it fails your task ends.
gulp.task('watch', function(){
gulp.watch('assets/scss/*.scss', ['sass']);
});
My current rule for this is:
gulp.task('sass', function () {
var src = path.join('src', 'scss', '*.scss');
var dst = path.join('public', 'css');
var config = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: false
};
return gulp.src(src)
.pipe(sourcemaps.init())
.pipe(sass(config)).on('error', util.log)
.pipe(concat('style.css')).on('error', util.log)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
And that all works fine
My output is this:
[05:49:27] Using gulpfile F:\Projects\Upload\gulpfile.js
[05:49:27] Starting 'watch'...
[05:49:29] Finished 'watch' after 1.98 s
but Gulp does not return to the command line, the cursor still keeps flashing away and when I update SASS files the code runs again and the updates are made to the CSS

Related

Fail compile Sass with gulp

I have a problem with my code. it will not compile when I write "Gulp sass" in the console, But nothing happened in my CSS folder. I have been sitting for a long time trying to make it work but it won't want to work for me and I am very grateful if anyone can help me with this
Here is the code:
var gulp = require('gulp');
var sass = require('gulp-sass');
// Compile
gulp.task('sass', function() {
return gulp.src('./src/Assests/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/Assets/css'));
});`
and in the console it says
gulp sass
[10:41:41] Using gulpfile ~\my-app\gulpfile.js
[10:41:41] Starting 'sass'...
[10:41:41] Finished 'sass' after 8.78 ms`
Change your code to log errors sass().on('error', sass.logError)
You task:
gulp.task('sass', function() {
return gulp.src('./src/Assests/scss/*.scss')
.pipe(sass()
.on('error', sass.logError)
)
.pipe(gulp.dest('./src/Assets/css'));
});
please make sure the name of the folder is correct. Looks like you have 'Assests' instead of 'Assets'. Note the extra 's'

gulp plugin - to merge broken js files into one js file?

I have read all the answers on the internet that I could find on this subject in last two days. Now I am just searching for gulp plugin that can merge broken js files into one big js file and not to throw error in terminal caused by unclosed function in one js file.
Explanation:
I have created js app built with modules.
At the very beginning I didn't knew that this will become big app and therefore I have wrote js code in one file.
Now I have come to an idea to split app.js file like this:
app-start.js (Named IIFE function open)
module1.js
module2.js
etc.
app-end.js (Named IIFE function closed)
I am using gulp as task runner and gulp-concat which works perfectly.
Problem is that when I try to break IIFE function in two files (app-start.js, app-end.js) then gulp doesn't wanna build bundle.js file.
I get error in terminal that I should repair my js code in
app-start.js
So, my question is,
do You maybe know about gulp plugin that will merge multiple js files in given order and never mind the js code errors in those files?
This is my gulp.js code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
sourceMap = require('gulp-sourcemaps'),
babel = require('gulp-babel');
gulp.task('sass', function() {
gulp.src('resources/sass/config-normalize.sass')
//.pipe(sourceMap.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 30 versions']}))
.pipe(sass({outputStyle: 'expanded'})) //expanded - compressed
//.pipe(sourceMap.write('.'))
.pipe(gulp.dest('configurator/css'));
gulp.src('resources/sass/config-style.sass')
//.pipe(sourceMap.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 30 versions']}))
.pipe(sass({outputStyle: 'expanded'})) //expanded - compressed
//.pipe(sourceMap.write('.'))
.pipe(gulp.dest('configurator/css'))
.pipe(browserSync.stream());
});
gulp.task('scripts', function() {
gulp.src([
//'resources/js/vendor/jquery.js',
//'resources/js/vendor/library/neki_file.js',
'resources/js/001-app-start.js',
'resources/js/002-ajax.js',
'resources/js/003-global-variables.js',
'resources/js/050-main.js',
'resources/js/100-my-modules.js',
'resources/js/app-end.js'
])
//.pipe(plumber())
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('all.js'))
//.pipe(uglify())
.pipe(gulp.dest('configurator/js'))
.pipe(browserSync.stream());
});
gulp.task('php', function() {
gulp.src('./**/*.php')
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost" //Upisi path do projekta na local hostu bez http://
});
});
gulp.task('images', function() {
return gulp.src('assets/images-uncompressed/**/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images'));
});
gulp.task('watch', function() {
gulp.watch('./**/*.php', ['php']);
gulp.watch('resources/sass/**', ['sass']);
gulp.watch('resources/js/**', ['scripts']);
//gulp.watch('resources/images-uncompressed/*', ['images']);
});
gulp.task('default', ['sass', 'scripts', 'php', 'browser-sync', 'watch']);
The problem is with the order you run your Gulp tasks:
babel parses and transforms JavaScript so it needs well-formed input.
concat doesn't need to understand JavaScript; it just combines text files. It will happily deal with your broken-up files.
If you move concat before babel, Babel can work on a single, well-formed blob of JavaScript built up from your split files.

How to determine when the gulp task running browserify is complete?

I have such a gulp task
gulp.task("js-min", function () {
browserify(config.paths.mainJs)
.transform(reactify)
.bundle()
.pipe(source('tec.min.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write(config.paths.dist))
.pipe(gulp.dest(config.paths.dist));
});
that create the minified version of the application. It runs periodically by the gulp-watch task. The problem I see, is that gulp tells me this task finishes in 30ms, but if I check the file being generated, it takes another 30s to see the actual new file being updated.
How shall I change the gulp task js-min so I know exactly when the file was finished updating in file system.
There are two solutions, and without knowing what browserify package you are using.
If it is promise based, then simply edit your code to return that promise:
gulp.task("js-min", function () {
return browserify(config.paths.mainJs)
If it is not promise-based, then it will have some kind of an onend or done method that takes a callback. In that case, it would be like this:
gulp.task("js-min", function (done) {
browserify(config.paths.mainJs)
.transform(reactify)
.bundle()
.pipe(source('tec.min.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write(config.paths.dist))
.pipe(gulp.dest(config.paths.dist))
// THIS IS THE LINE TO CHANGE
.onfinish(done);
});

Error No such file or directory during Gulp-Ruby-Sass Task

I'm using Gulp as my task runner, and gulp-ruby-sass to compile my sass files into css.
The error I'm getting on my gulp default task:
My default Gulp task:
gulp.task('default', ['delete', 'web_css', 'dash_css', 'web_js', 'dash_js']);
My 2 compile SASS tasks:
// Compile public SASS
gulp.task('web_css', function() {
return sass('client/website/_sources/sass/bitage_web.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/website/assets/css'));
});
// Compile dashboard SASS
gulp.task('dash_css', function() {
return sass('client/dashboard/_sources/sass/bitage_app.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/dashboard/assets/css'));
});
Both tasks above are virtually identically.
When I run the default task (gulp):
The website css compiles ok
All the js compiles ok
But then I get that error before the dash_css finishes, and the
css is not compiled :(
Additional notes:
If make a change in gulp watch the dash_css will compile just
fine.
If I run just gulp dash_css it also compiles just fine.
I only have this Errno::ENOENT bug when I run the default task.
Do you see anything strange above? Or have run into this issue before?
Use callback so that gulp knows when the task is complete:
gulp.task('delete', function(cb) {
del([
'client/website/assets/css/maps',
'client/website/assets/css/bitage_web.css',
'client/dashboard/assets/css/maps',
'client/dashboard/assets/css/bitage_app.css',
'client/website/assets/js/*',
'client/dashboard/assets/js/*'
], cb);
});
Make delete run before other tasks for example with run-sequence.
I've changed
gulp.task('web_css', function() {
return sass(....
to:
gulp.task('web_css', function() {
return gulp.src('

Gulp Concat + Browserync restarting

I'm using gulp concat and browserync. When I run gulp, it starts browserync and concatenates and reloads all js files found in modules. The problem is that it only does the concatenation of js files once, so I need to stop running gulp and run it again so I can see any changes reflected to js files. I only see the gulp notify task after stoping and restarting gulp too. How do I setup gulp so that always bundles and compiles the js and then runs browersync?
Here is my gulpfile
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');
// default
gulp.task('default', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/modules/**/*.js', browserSync.reload);
});
gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('app/build/js'))
.pipe(notify({ message: 'Scripts in modules have been bundled!' }));
});
//start browsersync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
Try this:
// watch
gulp.task('watch', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/modules/**/*.js', ['scripts']);
});
gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('app/build/js'))
.pipe(notify({ message: 'Scripts in modules have been bundled!' }))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('default', ['watch', 'scripts']);
I'm not sure but could you try to put
gulp.watch('app/modules/**/*.js', ['scripts']);
under task "default"
As I understand your gulp didn't watch your files and run the script
P.S. I'm not expert in gulp if it doesn't work out I'm sorry.

Categories