Gulp is not comile sass file and reload the page - javascript

I have this code in my gulpfile.js file:
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
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('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
Now, when I run this command
gulp watch
It's open the project on browser BUT, when I do some changes on html, js or scss file then gulp does not compile the scss file and reloading the browser.
Can someone tell me what is the issues here?

Related

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?

Jquery library not working after gulp bundle

I am quite a newbie for gulp but i am trying to implement it in my this project. But looks like somewhere i mashup. I order the js files and was trying to get the bundle. But looks like jquery lib or something is not working.
Here is my gulpfile.js code:
'use strict';
// include all necessary plugins in gulp file
var gulp = require('gulp');
var order = require('gulp-order');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Task defined for java scripts bundling and minifying
gulp.task('scripts', function() {
return gulp.src('assets/src/js/*.js')
.pipe(order([
"assets/src/js/jquery-3.2.1.slim.min.js",
"assets/src/popper.min.js",
"assets/src/js/bootstrap.min.js",
"assets/src/js/morphext.min.js",
"assets/src/js/pushy.min.js",
"assets/src/quote.js"
], { base: './' }))
.pipe(concat('bundle.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'));
});
// Task define for compliling scss file
// Currently i am not using this complier
gulp.task('sass', function() {
return gulp.src('assets/src/css/**/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('assets/dist/css/'));
});
// Define task to optimize images in project
gulp.task('images', function() {
return gulp.src('assets/src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('assets/dist//img'));
});
// Task watch
gulp.task('watch', function() {
// Watch .js files
gulp.watch('assets/src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('assets/src/css/*.scss', ['sass']);
// Watch image files
gulp.watch('assets/src/img/**/*', ['images']);
});
// declaring final task and command tasker
// just hit the command "gulp" it will run the following tasks...
gulp.task('default', ['scripts', 'images' , 'watch']);
I got solution for this problem, here is my new code for gulp.js!
'use strict';
// include all necessary plugins in gulp file
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Task defined for java scripts bundling and minifying
gulp.task('scripts', function() {
return gulp.src
([
'assets/src/js/jquery/*.js',
'assets/src/js/vendor/*.js',
'assets/src/js/plugins/*.js',
'assets/src/js/custom/*.js',
])
.pipe(concat('bundle.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js/'));
});
// Task define for compliling scss file
gulp.task('sass', function() {
return gulp.src('assets/src/scss/**/*.scss', {style: 'compressed'})
.pipe(rename({suffix: 'custom'}))
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('assets/dist/css/unminified/'));
});
// Define task to optimize images in project
gulp.task('images', function() {
return gulp.src('assets/src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel:5, progressive: true, interlaced: true })))
.pipe(gulp.dest('assets/dist/img'));
});
// Task watch
gulp.task('watch', function() {
// Watch .js files
gulp.watch('assets/src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('assets/src/scss/*.scss', ['sass']);
// Watch image files
gulp.watch('assets/src/img/**/*', ['images']);
});
// declaring final task and command tasker
// just hit the command "gulp" it will run the following tasks...
gulp.task('default', ['scripts', 'images' , 'sass' , 'watch']);

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
});
});

Why would Browsersync live reload for one compilation task but not another?

I have a gulpfile running to compile Sass, CoffeeScript, and live reload both through Browsersync:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var coffee = require('gulp-coffee');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('./src/scss/**/*.scss')
.pipe(plumber())
.pipe(sass({
style: 'expanded',
precision: 10
}))
.pipe(autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe(cssmin())
.pipe(gulp.dest('./dist'))
.pipe(browserSync.stream());
});
gulp.task('coffee', function() {
return gulp.src('./src/coffee/**/*.coffee')
.pipe(plumber())
.pipe(coffee())
.pipe(uglify())
.pipe(gulp.dest('./dist'))
.pipe(browserSync.stream());
});
gulp.task('serve', function() {
browserSync.init({
proxy: 'http://mamp-site.dev'
});
gulp.watch('./src/scss/**/*.scss', ['sass']);
gulp.watch('./src/coffee/**/*.coffee', ['coffee']);
});
Browsersync successfully reloads my compiled JS every time I make a change, but won't reload my compiled CSS. I know placing browserSync.stream() after gulp.dest() is correct, because Browsersync says it only cares about your CSS when it's finished compiling. I also verified that my Sass is compiling.
Why would Browsersync work for my 'coffee' task but not my 'sass' task? This is my first go at gulp, so I'm hoping it's something simple.
EDIT: watching 'sass' only within the 'serve' task works, but not with both 'sass' and 'coffee'
I don't know why your sass is not reloading, but you should not be using browserSync.stream for your javascript. Perhaps the streams are getting mixed up. Your watch should be
gulp.watch('./src/coffee/**/*.coffee', ['coffee-watch']);
and there should be
gulp.task('coffee-watch', ['coffee'], function (done) {
browserSync.reload();
done();
});
Remove .pipe(browserSync.stream()); from your coffee task.

Gulp - JADE - browserSync not reload automatically

I use gulp for create. I use browser sync for see the preview of my pages. But I can't configure gulp to reload automatically. When I make a change in the browser, I have to reload manually only with jade files. I use and compile CSS to SCSS and this if change automatically...
Which one is my error, why gulp not reload my jade or html files in the preview?
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var jade = require('gulp-jade');
var autoprefixer = require('gulp-autoprefixer');
var minimifyCss = require('gulp-minify-css');
// JADE
gulp.task('jade', function() {
gulp.src('./jade/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('./'))
});
// SASS
gulp.task('sass', function() {
gulp.src('./sass/styles.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: true
}))
.pipe(minimifyCss({
keepBreaks: true
}))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
// browserSync
gulp.task('default', function() {
browserSync.init({
server: "./"
});
gulp.watch("./sass/styles.scss", ['sass']);
gulp.watch("./jade/*.jade", ['jade']);
gulp.watch("./*.html").on('change', browserSync.reload);
});
You are not including your jade or sass function in your parameters
gulp.task('default', ['sass'], ['jade'], function(){
gulp.watch("./sass/styles.scss", ['sass']);
gulp.watch("./jade/*.jade", ['jade']);
})
gulp default

Categories

Resources