I'm having an issue with Gulp I just simply want to process sass files, optimize images and watch changes on said sass files. For some reason it does run the sass and imagemin tasks correctly but then it tries to watch and after several seconds it jus exits gulp and I'm back a command line like if I manually stopped the tasks. I don't get any errors or warnings it just ends. This is the gulpfile.js:
var gulp = require('gulp'), //import gulp node package
sass = require('gulp-sass'),
imageMin = require('gulp-imagemin');
function errorLog(error){
console.error.bind(error);
this.emit('end;');
}
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass({
outputStyle: 'compressed'
}).on('error', errorLog))
.pipe(gulp.dest('css'));
});
gulp.task('imagemin', function(){
return gulp.src('img/*')
.pipe(imageMin())
.pipe(gulp.dest('minimg'));
});
gulp.task('watch', function(){
return gulp.watch('scss/**/*.scss', ['sass']);
});
gulp.task('default',['sass','imagemin','watch']);
On command line this is all I see:
[14:02:44] Using gulpfile C:\project-path\gulpfile.js
[14:02:44] Starting 'sass'...
[14:02:44] Starting 'imagemin'...
[14:02:44] Starting 'watch'...
Then after approx. 20secs it exits gulp, I tried looking everywhere and use other post fixes and no luck.
Related
I'm working on a legacy site that has some pre-set-up Gulp commands.
I want to compile some .less files into .css. The existing script is as such:
gulp.task('less', function(){
return gulp.src('./src/css/less/app.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./src/css/'))
});
However, when I run this I get an error:
Error: File not found with singular glob: /src/css/less/app.less (if this was purposeful, use `allowEmpty` option)
I've checked all paths, all #import and directories and they're all ok.
I am using Gulp Local: 4.0.0, CLI: 2.3.0.
Would anyone know could be causing this?
Maybe later, but Gulp 4 has a new syntax for writing tasks.
Also, you have to fix the wrong path to the source file:
// gulpfile.js
const SRC = 'src';
const DIST = 'src';
function lessTask(cb) {
return src(SRC + '/less/app.less')
.pipe(less())
.pipe(dest(DIST + '/style.css'));
}
exports.default = series(lessTask);
# On terminal:
gulp
I configured this Gulp task for my local project. It is perfectly watching my folders, compiling the SCSS files to CSS.
Only problem is that -
On an average my Gulp Task runs 'sass' task around 6 times in a second, whether I make any change in code or not. It keeps on running like this redundantly even after closing the IDE (SublimeText). I feel like it might not be a good practice and also compromising my machine's performance.
Here's my Gulp code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function(){
return gulp.src('compile/style.scss')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass())
.pipe(sass({outputStyle: 'expanded',sourceComments: false}))
.pipe(sourcemaps.write('../../../compile'))
.pipe(gulp.dest('public/assets/css'));
});
gulp.task('watch', function(){
gulp.watch('compile/**/*', gulp.series('sass'));
});
gulp.task('default', gulp.series('sass','watch'));
You are creating a loop because of these two lines:
.pipe(sourcemaps.write('../../../compile')) // saving to compile
gulp.task('watch', function(){
gulp.watch('compile/**/*', gulp.series('sass')); // watching compile
});
So your sass task runs , writes to the compile folder which the watch sees has changed and it fires the sass task again, over and over.
Save your sourcemaps somewhere that isn't including in your watch folders.
gulp.task('sass', function(){
return gulp.src('compile/style.scss')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass()) // delete this, no need for two sass pipes
.pipe(sass({outputStyle: 'expanded',sourceComments: false}))
.pipe(sourcemaps.write('../../../compile'))
.pipe(gulp.dest('public/assets/css'));
});
When I run 'gulp watch' in my terminal, I get this response:
[13:59:40] Using gulpfile ~/path/to/gulpfile.js
[13:59:40] Starting 'watch'...
[13:59:40] Finished 'watch' after 45 ms
Here is the relevant code from my gulpfile.js:
gulp.task('sass', function () {
return gulp.src([baseDir + '/sass/style.scss',baseDir + '/sass/events/events.scss'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(baseDir + '/css'))
.pipe(livereload());
});
// watch
gulp.task('watch', function () {
livereload.listen();
gulp.watch(baseDir + '/sass/**/*.scss', ['sass']);
});
My problem is this: when I make a change in a .scss file, it is not recognised in the terminal.. why is this?
My gulp version is
version 3.9.1
Local version 3.9.1
When this happens I assume my directory is off. No errors? No files, lol. Have you tried replacing baseDir with a hard coded call to the directory and see what happens? example
gulp.watch('app/sass/**/*.scss', ['sass']);
and see what happens?
I have this gulp task
gulp.task('lint', function() {
return gulp.src(config.scripts.src)
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.on('error', notify.onError('<%= error.message %>'));
});
Which basically lints my code and outputs the errors in the console while also displaying a notification with gulp-notify.
It runs fine when is called through gulp watch on the changed files, but it doesn't work if I call it in a stream of other tasks like this:
runSequence(['markup', 'styles', 'lint', 'browserify', 'images', 'fonts'], 'watch', cb);
unless of course i put a .pipe(gulp.dest('dest')) at the end of the task, but it is redundant bacause it writes the file.
So how should I go about this?
EDIT: here is the example task, and here is the runSequence which fails if this line is removed, to execute the project just run npm install and then npm start
I got an weird issue. BroswerSync works fine when i am on online(connected by wimax) but not working or launching browser when I on offline. Few days back, same issue happened with livereload. What might be the problem?
Here is simple code on gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: './'
}
})
});
when i run gulp command showing-
$ gulp browser-sync
[23:25:12] Using gulpfile e:\myapps\gulp-browsersync\gulpfile.js
[23:25:12] Starting 'browser-sync'...
[23:25:13] Finished 'browser-sync' after 119 ms
and stopped..
In my Case I just change
proxy: 'localhost:80'
to
proxy: '127.0.0.98:80'
and its start working..
I might be missing something here, but have you tried setting browserSync options to offline : true ?
If not, this may very well be the problem.
Link : http://www.browsersync.io/docs/options/#option-online