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?
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'));
});
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.
Having used Gulp all the time for 2 last years, I've suddenly got a problem with the less file imports and just can not resolve it.
I've tried more then 5 combinations, such as from SmashingMagazine, from gulp-less homepage, etc... none worked for me.
The problem is (error log in console output):
C:\wamp\www\lumenframe>gulp less
[10:23:25] Using gulpfile C:\wamp\www\lumenframe\Gulpfile.js
[10:23:25] Starting 'less'...
Potentially unhandled rejection [2] '/bower_components/animate.css/animate.css' wasn't found. Tried - /bower_components/animate.css/animate.c
ss,bower_components\bootstrap\less\bower_components\animate.css\animate.css,bower_components\animate.css\bower_components\animate.css\animate
.css,bower_components\font-awesome\less\bower_components\animate.css\animate.css in file C:\wamp\www\lumenframe\bower_components\assets\l
ess\appstrap.less line no. 43
Gulpfile.js looks like this:
// Init Gulp
var gulp = require('gulp');
// Dependencies
var less = require('gulp-less'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-uglify');
// Folder paths
var jsdir = './bower_components/assets/js/',
jspub = './public/assets/js/',
lessdir = './bower_components/assets/less/',
lesspub = './public/assets/css/';
// LESS compiler
gulp.task('less', function () {
return gulp.src(lessdir + 'frontend.less')
.pipe(less({
compress: true,
paths: [
'./bower_components/bootstrap/less/',
'./bower_components/animate.css/',
'./bower_components/font-awesome/less/'
]
}))
.pipe(autoprefixer('last 10 versions', 'ie 9'))
.pipe(gulp.dest(lesspub));
});
// Concatenate and Minify JS
gulp.task('scripts', function () {
return gulp.src(jsdir + '*.js')
.pipe(concat('appstrap.js'))
.pipe(gulp.dest(jspub))
.pipe(rename('appstrap.min.js'))
.pipe(uglify())
.pipe(gulp.dest(jspub));
});
// Filewatcher for changes
gulp.task('watch', function () {
gulp.watch(jsdir + '*.js', ['scripts']);
gulp.watch(lessdir + '*.less', ['less']);
});
// Default Task combination
gulp.task('default', ['less', 'scripts', 'watch']);
All files are in their proper place, so they exists. And once I do #import appstrap.less, it comes out with the error **Potentially unhandled rejection [2].
frontend.less looks like this:
// Core source files of the whole frontend plugins
#import (once) "appstrap.less";
.btn{
color: #ff0000;
display: block;
}
Any visible errors ?
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