I have the following Gulp Watch Task.
// Watch function
function watch() {
// browserSync.init({
// proxy: 'localhost/Unice/html'
// });
gulp.watch('assets/scss/**.*scss', style);
gulp.watch('./*.html').on('change', browserSync.reload);
gulp.watch('assets/css/**.css').on('change', browserSync.reload);
}
I have another task which converts SCSS to css as follows
//scss to css
function style() {
return gulp.src('assets/scss/**/*.scss', { sourcemaps: true })
.pipe(sass({
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('assets/css', { sourcemaps: '.' }))
.pipe(browserSync.reload({ stream: true }));
}
How can I run the style task automatically when running the watch command if I make modifications to any SCSS files.
The glob in your watch task contains an error and should be:
gulp.watch('assets/scss/**/*.scss', style);
Related
I am learning the front-end build system currently gulp, i want to use brower-sync and the problem is when it brings up the browser it will not display my html file and it will say "Cannot GET /" error in the browser window. This is my index.js code. Help me 🙏
Thanks :)
import gulp from 'gulp';
import rename from 'gulp-rename';
import sass from 'gulp-sass';
import twig from 'gulp-twig';
import browserSync from 'browser-sync';
gulp.task('style', () => {
console.log('execute sass file');
return gulp.src('src/assets/scss/styles.scss')
.pipe(rename('css/styles.css'))
.pipe(gulp.dest('dist'));
});
gulp.task('index', () => {
console.log('execute twig');
return gulp.src('src/markup/index.twig')
.pipe(rename('html/index.html'))
.pipe(gulp.dest('dist/html'))
});
gulp.task('twig', function() {
return gulp.src('src/markup/*.twig')
.pipe(twig())
.pipe(gulp.dest('dist/html'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('sass', function () {
return gulp.src('src/assets/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', function(done) {
gulp.watch('src/assets/scss/**/*.scss', gulp.task('default'));
gulp.watch('src/markup/index.twig', gulp.task('twig'));
console.log('task twig and sass works');
done();
});
gulp.task('browser-sync', () => {
browserSync.init({
server: {
baseDir: 'dist/',
browser:"google chrome",
open: true,
}
});
});
gulp.task('start', gulp.parallel('browser-sync','twig', 'sass', 'watch'));
I'm new in the use of task runners like Gulp or Grunt, I have chosen to use Gulp to automate my tasks because I'm familiar with Javascript language.
I succeeded to compile my .less files to .css, I even wrote a task to minify my .css files.
I would like to run watch task with BrowSync, which automatically compile .less files to .css and .css to .min.css.
Here's my code :
gulp.task('minifyCSS', () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'));});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}));});
gulp.task('watchSync', ['less', 'minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['less']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});});
The browserSync task runs well but it never compiles .css to .min.css. But when I run "gulp minifyCSS" it does the job ...
Do I miss a step ? Can anyone help me on this one ? :)
I'm nearly sure this will work:
gulp.task('minifyCSS', ['less'], () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}))
;
});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
;
});
gulp.task('watchSync', ['minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['minifyCSS']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});
});
This is a full gulp js file. Here gulp-watch is not used. So it's commented.
gulp.task('scripts', function() {
gulp.src(['app/*.js', 'app/shared/*/*.js','app/components/*/*.js'])
.pipe(plumber({
handleError: function(err) {
console.log(err);
this.emit('end');
}
}))
// .pipe(watch(['app/*.js', 'app/shared/*/*.js','app/components/*/*.js']))
.pipe(print(function(filepath) {
return "MrGopal modified : " + filepath;
}))
.pipe(ngAnnotate())
.pipe(concate('zaya.app.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('assets/js'))
.pipe(broswerSync.stream())
})
Browser sync TASK
gulp.task('browser-sync', function() {
broswerSync.init({
notify: true,
proxy: "http://localhost:8000"
})
})
gulp.task('scripts-sync',['scripts'],broswerSync.reload)
gulp.task('html-sync',['html'],broswerSync.reload)
gulp.task('less-sync',['less'],broswerSync.reload)
WATCH TASK
gulp.watch(['app/*.js', 'app/shared/*/*.js', 'app/components/*/*.js'], ['scripts','scripts-sync']);
gulp.watch(['app/shared/*/*.html','app/components/*/*.html'], ['html','html-sync']);
gulp.watch(['app/shared/*/*.css','app/components/*/*.css'], ['less','less-sync']);
DEFAULT TASK
gulp.task('default', ['scripts', 'html', 'less', 'watch','browser-sync'])
While running gulp, it says watch is not a function. But same code works at my office. What could be wrong?
The error code :
[16:03:49] 'watch' errored after 244 μs
[16:03:49] TypeError: undefined is not a function
at Gulp.watch (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/gulp/index.js:35:16)
at Gulp.<anonymous> (/home/gopal/Documents/zaya-proto/zaya/zaya/static/gulpfile.js:96:10)
at module.exports (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/index.js:214:10)
at /home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/index.js:279:18
at finish (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/lib/runTask.js:21:8)
at module.exports (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/lib/runTask.js:60:3)
at Gulp.Orchestrator._runTask (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/gopal/Documents/zaya-proto/zaya/zaya/static/node_modules/orchestrator/index.js:214:10)
I generated a js file with a source map using the following gulp task. The original sources get loaded in Firefox but do not get loaded in Chrome. Can anyone point out why Chrome can't find the sources which are clearly included in the generated index-[hash].js.map?
gulp.task('browserify', function () {
// set up the browserify instance on a task basis
return browserify({ debug: true })
.transform(babelify)
.require('client/web/private/js/es6/index.js', {
entry: true
})
.bundle()
.on('error', function handleError(err) {
console.error(err.toString());
this.emit('end');
})
.pipe(source('index.js'))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.pipe(rev())
// .on('error', gutil.log)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./client/web/public/dist/js'))
});
Whenever there's an error in my .scss file, my gulp task stops and I have to run gulp in the Terminal again. I'm trying to use gulp-plumber to remedy this, but can't work out where to place it in the task.
I'm requiring it like this, at the top of my gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
...
I'm trying to pipe it into the task like so:
gulp.task('pre-process', function(){
gulp.src('./sass/mnml.scss')
.pipe(plumber())
.pipe(watch(function(files) {
return files.pipe(sass())
.pipe(prefix())
.pipe(size({gzip: false, showFiles: true}))
.pipe(size({gzip: true, showFiles: true}))
.pipe(gulp.dest('css'))
.pipe(minifyCSS())
.pipe(rename('mnml.min.css'))
.pipe(size({gzip: false, showFiles: true}))
.pipe(size({gzip: true, showFiles: true}))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.reload({stream:true}));
}));
});
But when I run gulp, I get this error:
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: /Users/realph/Dropbox/temp/mnml/sass/base:4: error: unbound variable $b-color
Any idea what I'm doing wrong? Any help is appreciated. Thanks in advance!
You're creating another stream of files in the watch callback, and I don't think it's using the top plumber plugin.
To do so, you have to change your callback to use it like:
return files
.pipe(plumber())
.pipe(sass())
.pipe(prefix())
.pipe(size({gzip: false, showFiles: true}))
.pipe(size({gzip: true, showFiles: true}))
.pipe(gulp.dest('css'))
.pipe(minifyCSS())
.pipe(rename('mnml.min.css'))
.pipe(size({gzip: false, showFiles: true}))
.pipe(size({gzip: true, showFiles: true}))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.reload({stream:true}));
You can also specify the errLogToConsole to your sass pipe
.pipe(sass({ errLogToConsole: true }))