How can I make 'gulp watch' command work? - javascript

Browser console doesn't watch errors but when I try to run the command in git console I have got a error.
let gulp = require('gulp');
let sass = require('gulp-sass');
let watch = require('gulp-watch');
let browserSync = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('src/scss/index.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/css/index.css'))
});
gulp.task('sass:watch', function() {
gulp.watch('src/scss/index.scss', ['sass']);
});
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: 'src'
},
notify: false
});
});
Link to my repository https://github.com/dzhulay/Step-Ham

The gulp.watch function requires a list of files and a function as second parameter.
You have to generate the function either with gulp.parallel or gulp.series, such as in your case:
gulp.task('watch', function() {
gulp.watch('src/scss/index.scss', gulp.series('sass'));
});
Also, in order to avoid the "file exists" error as specified in your comment, please implement "gulp-chmod" in your sass task, such as:
var chmod = require('gulp-chmod');
gulp.task('sass', function() {
return gulp.src('src/scss/index.scss')
.pipe(chmod(0o755))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/css/index.css'))
});

Related

Gulp watch task is not working when sass/js/html file is saved

I am trying to reload the browser when scss, HTML and js file is changed but when I run the gulp watch command it's not reloading the browser or can't see any css/js/html changes.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
With respect to Mark's solution, just add .on('change', browserSync.relod) to the end of the desired watch if you want to see the live reload:
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: 'app'
},
});
done();
})
gulp.task('watch', gulp.series('browserSync', 'sass', function () {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
gulp.watch('app/scss/**/*.scss').on('change', browserSync.reload);
gulp.watch('app/*.html').on('change', browserSync.reload);
gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
}));
You need to make a couple of changes shown here:
gulp.task('browserSync', function(done) { // done added here
browserSync.init({
server: {
baseDir: 'app'
},
});
done(); // done() called here
})
// gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.task('watch', gulp.series('browserSync', 'sass', function () { // see note below
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// gulp.watch('app/*.html', browserSync.reload);
gulp.watch("app/*.html", { events: 'all' }, function(cb) {
browserSync.reload();
cb();
});
gulp.watch('app/js/**/*.js', browserSync.reload);
})); // added a )
gulp.watch() takes 2 arguments, not 3. gulp.series() should include all the functions - including your anonymous function that contains the watch calls. And lose the array brackets.

Browsersync works only on second save

I never encountered this issue before cause I worked with one-page websites. But now I have several pages, and when I created third file in 'build' folder, browsersync started to work not as expected.
Basically, browsersync now makes changes in browser only on second save. You can see this behavior on video: https://youtu.be/lNFEDZMBiQY
Here's my gulp setup:
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
sass = require('gulp-sass'),
pug = require('gulp-pug'),
concat = require('gulp-concat'),
//uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create()
// browserSync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'build',
directory: true
},
notify: false
})
})
// pug to html
gulp.task('pug', function buildHTML() {
return gulp.src('src/pug/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/'))
.pipe(browserSync.reload({
stream: true
}))
});
// scss to css
gulp.task('sass', function(){
return gulp.src('src/scss/style.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({
stream: true
}))
});
// js concat and minify
gulp.task('scripts', function() {
return gulp.src(['src/js/jquery-3.0.0.min.js', 'src/js/jquery-migrate-1.4.1.min.js', 'src/js/swiper.min.js', 'src/js/jquery.photoswipe-global.js', 'src/js/custom.js'])
.pipe(concat('main.min.js'))
//.pipe(uglify())
.pipe(gulp.dest('build/js/'));
});
// watcher
gulp.task('watch', ['browserSync', 'sass', 'pug', 'scripts'], function(){
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/pug/**/*.pug', ['pug']);
gulp.watch('src/js/**/*.js', ['scripts']);
// Other watchers
})
gulp.task('default', ['watch']);
Maybe, there's an error in this setup? How I can fix this issue?

BrowserSync Not Loading

Very new to BrowserSync. I'm trying to find out how to get it going haha.
My main file that stores everything is called 'gulpwork'.
Inside it I have 4 folders; two to convert Pug ('src') to HTML ('dist') and two to convert SASS ('sass') to CSS ('css').
I've managed to get BrowserSync to run however I'm getting the 'Cannot GET /' message so I know it probably has something to do with file directory.
I would like to have both Pug and SASS synced.
EDIT: It only works if I have both my Pug and HTML file outside their respected folders directly inside my root and it only works if the HTML file is named index.html. How can I get it to work in its respected folders and without having to change the name to index?
Here is my gulpfile.js code:
JS:
var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', ['sass', 'pug'], function() {
browserSync.init({
server: {
baseDir: './'
}
})
});
gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./dist'))
});
gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('watch', ['browserSync'], function() {
gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['sass', 'pug', 'watch']);
Figured it out. BrowserSync looks for an 'index.html' file to start up and we get the 'cannot GET /' error because it's looking for something it doesn't see. So wherever our pug/html files are located, we must tell the pug function + the watch function where they are and then run BrowserSync. After it's run, you will still see the error however it's really working. All you have to do is link to the file so in my browser after localhost:3000 I would type the location of my file, so it would be 'localhost:3000/dist/about.html' After that, BrowserSync works. :)
var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', ['sass', 'pug'], function() {
browserSync.init({
server: {
baseDir: './'
}
})
});
gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./dist'));
});
gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watch', ['browserSync'], function() {
gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['sass', 'pug', 'watch']);
gulp.task('browser-sync', function() {
browserSync.init({
watch: true, // <-- Adding this line solved my reload problem
server: {
baseDir: './'
},
port: 8080 // <-- If you have problems with port 3000 try changing it like this
});
});

Task 'sass' is not in your Gulpfile - ERROR

Following is the code I am facing this error please help me solve this, i would be really graced to get clear answer ___
Everything runs smooth but except if I save the file, following error occurs
ERROR : Task 'sass' is not in your gulpfile
// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
cssmin = require('gulp-minify-css'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
autoprefix = require('gulp-autoprefixer');
changed = require('gulp-changed'),
// scripts task
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js/'));
});
// styles task and autoprefix
gulp.task('styles', function() {
gulp.src(['./src/sass/*.scss'])
.pipe(autoprefix('last 2 versions'))
.pipe(sass())
.pipe(concat('styles.css'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css/'));
});
// browser sync
gulp.task('browser-sync', ['styles'], function() {
browserSync({
server: {
baseDir: ''
},
notify: false
});
gulp.watch("./src/sass/*.scss", ['scss']);
gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
var imgSrc = './src/img/**/*',
imgDst = './dist/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);
You do not have, indeed, defined "sass" task nor "scss" task thats marked as dependable under "browser-sync" file.
Try Replacing:
gulp.watch("./src/sass/*.scss", ['scss']);
with
gulp.watch("./src/sass/*.scss", ['styles']);

Error in gulp while copying files

My command line shows following error while i entered the gulp watch command. Since gulp is searching css files from inside the app directory instead of searching it from bower_components.I have tried using minify-css as well as copy-css.Both are not working.
events.js:160
throw er; // Unhandled 'error' event
^
Error: Path F:\Backup Folder\coursera-project\Full stack course\Angular Js\Assignments\week1\confusion\app\bower_components\bootstrap\dist\css\bootstrap.min.css not found!
My gulpfile.js file
'use strict';
var gulp = require('gulp'),
cleancss = require('gulp-clean-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del'),
ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[cleancss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'))
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
I am also not able to copy html files to my dist folder.

Categories

Resources