I have a small problem against I'm fighting since few hours. I'd like to use gulp for watching scss files, convert them to css then reload browser.
It worked until reload browser. So sass is working with gulp but not Browsersync. Here is my gulpfile.js, maybe someone can help ?
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('webroot/css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["./**/*.css", "./**/*.php","./**/*.ctp","./**/*.js"], {
server: {
baseDir: "./",
proxy:{target:'cake.dev', ws : true}
},
logLevel: "debug",
});
});
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("webroot/css/*.scss", ['sass']);
});
Ps : I'm working with CAKEPHP 3.
So you need to tell browserSync to reload at the end of the sass task:
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('webroot/css'))
.pipe(browserSync.reload({stream:true});
});
I solved it :
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}).on('error', sass.logError))
.pipe(gulp.dest('webroot/css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["webroot/css/*.css", "webroot/js/*.js"], {
proxy : "http://cake.dev/",
});
});
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("webroot/css/*.scss", ['sass']);
});
You don't have to use server{//...} in browserSync init because that is to CREATE a server. Instead if you are on wamp you have to use simply proxy... (if you have a virtual host you must modify it and replace "require local" by "require all granted", I THINK...).
And on the "on error" condition is to not stop the program if you make an error writing your scss and saving it.
So you can make mistakes, but you are responsable to learn about it.
Thanks Everyone. Hope this will help somebody else one day.
Related
I'm having trouble with browserSync I can't get reload do trigger after trying several different methods. BrowserSync itself is up and running although when I manually reload nothing happens I have to open a new tab to see any changes. I'm not really understanding gulp 4 and all the sources I have watched seem to be using completely different methods to me. Any help would be greatly appreciated feel free to ask any questions.
var gulp = require('gulp');
var sass = require('gulp-sass');
var concatcss = require('gulp-concat');
var concatjs = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var reload = require('browser-sync').reload();
var nunjucks = require('gulp-nunjucks-render');
var browserSync = require('browser-sync').create();
sass.compiler = require('node-sass');
gulp.task('sass', function () {
return gulp.src('./Edit/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./Edit/css'));
});
gulp.task('concatcss', function() {
return gulp.src('./Edit/css/*.css')
.pipe(concatcss('style.css'))
.pipe(gulp.dest('./Edit/css/concated/'));
});
gulp.task('concatjs', function() {
return gulp.src('./Edit/java-script/*.js')
.pipe(concatjs('scripts.js'))
.pipe(gulp.dest('./Upload/js/'));
});
gulp.task('css', function () {
return gulp.src('./Edit/css/concated/*.css')
.pipe(uglifycss({
"maxLineLen": 80,
"uglyComments": true
}))
.pipe(gulp.dest('./upload/css'));
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: "./Upload/"
}
});
});
gulp.task('run',gulp.parallel('browserSync', gulp.series('sass','concatcss','concatjs','css')));
gulp.task('watch', function(){
gulp.watch('./Edit/sass/*.scss',gulp.series('sass'));
gulp.watch('./Edit/css/*.css',gulp.series('concatcss'));
gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync
gulp.watch('./Edit/css/concated/*.css', gulp.series('css'));
});
gulp.task('default', gulp.parallel('watch', 'run'));
For anyone else having trouble here is my solution, simply add this .on('change', browserSync.relod) to the end of the desired watch.
gulp.task('watch', function(){
gulp.watch('./Edit/sass/*.scss',gulp.series('sass'));
gulp.watch('./Edit/css/*.css',gulp.series('concatcss'));
gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync
gulp.watch('./Edit/css/concated/*.css', gulp.series('css'));
gulp.watch('./Upload/css/*.css').on('change', browserSync.reload);
gulp.watch('./Upload/js/*.js').on('change', browserSync.reload);
});
I have problem. Yestrday I had to update the Node.js kernel and now that I change something in the LESS file, there will be no css update. Gulpfile is the same as before the update. Could someone advise me what's wrong with my gulpfile script?
The HTML file update is OK.
//*********** IMPORTS *****************
var gulp = require('gulp'),
browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat-css');
var cssmin = require('gulp-cssmin');
/* BROWSERSYNC */
gulp.task('browserSync', function () {
var files = ['orient-spa/**'];
browserSync.init(files, {
server: {
baseDir: 'orient-spa/',
index: 'index.html'
},
logPrefix: 'OS01',
browser: ['chrome']
});
});
gulp.task('css', function () {
var processors = [
autoprefixer
];
return gulp.src('./orient-spa/skins/less/index-files.less')
.pipe(less())
.pipe(postcss(processors))
.pipe(gulp.dest('./orient-spa/skins/css/'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./orient-spa/skins/less/*.less', ['css']);
gulp.watch('./orient-spa/skins/css/*.css', ['concatMinify']);
});
gulp.task('concatMinify', function () {
return gulp.src('./orient-spa/skins/css/*.css')
.pipe(concat("index.css"))
.pipe(cssmin())
.pipe(gulp.dest('./orient-spa/skins/css/compiled'))
.pipe(livereload());
});
gulp.task('default', ['browserSync', 'watch', 'css', 'concatMinify']);
Thanks for your advice :-)
I try this path, but problem remains.
Last version node.js was Node.js 7.2.1 (Node.js), now Node.js 9.8.0.
I attach an image to the console after changing 1 line in the LESS file.
Here I see that the set of commands does not call correctly. Or they are called repeatedly. Do not you see a mistake here, please?
Thanks for your advice
after reading alot and trying to make my own gulpfile.js I figured out how to make it compile my "scss" to a "css", the problem is that my browser-sync doesn't work because I need a proxy (because im using .php not .html), If I write this on CMD: "browser-sync start --proxy localhost:8080/app" I can see my files, but I need it to sync every time I modify something on my "scss". All I need now is to implement the proxy thing on it and reloads everytime I save/modify the ".scss", this is my currently gulpfile.js :
var gulp = require('gulp');
var httpProxy = require('http-proxy');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var paths = {
scss: '.sass/*.scss'
};
gulp.task('sass', function () {
gulp.src('scss/style.scss')
.pipe(sass({
includePaths: ['scss']
}))
.pipe(gulp.dest('css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js"], {
server: {
baseDir: "./"
}
});
});
gulp.task('watch', ['sass', 'browser-sync'], function () {
gulp.watch(["scss/*.scss", "scss/base/*.scss", "scss/sections/*.scss", "scss/style/*.scss"], ['sass']);
});
This gulpfile.js is watching my "scss/syle.scss" and updates my "css/style.css" everytime I modify the scss file.
Have you taken a look at the browserSync options? This should give you a pretty good idea on how to set it up. It doesn't seem like you implemented it in the gulpfile you provided.
I am trying to create a basic gulp build process template that starts with an app folder containing html, sass, javascript, and image files and builds those files into a public folder. I am using gulp to watch the app folder for changes and then automatically refreshing the build process to the public folder.
I using browser-sync to serve the public folder and watch for changes but it doesn't seem to automatically reload when a change to the public folder is made. If I manually refresh the browser the changes are reflected.
Thanks for the help, see below for my gulp file:
//BASIC GULP FILE SETUP
//-------------------------------------------------------------
//Include Gulp
var gulp = require('gulp');
//General Plugins
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var del = require('del');
var watch = require('gulp-watch');
var runSequence = require('run-sequence');
//CSS Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
//JS Plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//HTML Plugins
var minifyHTML = require('gulp-minify-html');
//IMG Plugins
//-------------------------------------------------------------
//TASKS
//-------------------------------------------------------------
//Clean Public Folder
gulp.task('clean', function() {
del(['public/**/*']);
});
//CSS Tasks
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(csso())
.pipe(gulp.dest('public/css'));
});
//HTML Tasks
gulp.task('html', function () {
return gulp.src(['./app/**/*.html'], {
base: 'app'
})
.pipe(minifyHTML())
.pipe(gulp.dest('public'))
;
});
//Image Tasks
gulp.task('image', function () {
return gulp.src('app/img/**/*.{png,jpg,jpeg,gif,svg}')
.pipe(gulp.dest('public/images'));
});
//JS Tasks
gulp.task('js', function () {
return gulp.src('app/js/**/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
// Watch files for changes
gulp.task('watch', function() {
// Watch HTML files
gulp.watch('./app/*.html', ['html'], browserSync.reload);
// Watch Sass files
gulp.watch('./app/sass/**/*.scss', ['sass'], browserSync.reload);
// Watch JS files
gulp.watch('./app/js/**/*', ['js'], browserSync.reload);
// Watch image files
gulp.watch('./app/img/*', ['image'], browserSync.reload);
});
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
});
gulp.task('defualt');
gulp.task('build', [], function(callback) {
runSequence('clean',
'sass',
'html',
'js',
'image');
});
I did a little more poking around the forums and the browser-sync documentation. In my serve task I needed to add a watch function to the Public directory that would manually call the reload every time a change was detected. So my 'browser-sync' task, now renamed 'serve', needs to look like this:
//Browser Sync Server
gulp.task('serve', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
gulp.watch("./public/**/*").on("change", browserSync.reload);
});
I am sure there is a way to do this with browser-sync's streams as well, but this manual reload method found in the docs has done the trick.
Try passing in a files object in the init function so it knows what to look for. No need for a different watch task, Browsersync does all that for you.
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
},
files: [
'**/*.css',
'**/*.js',
'**/*.html'
// etc...
]
});
});
I'm using Gulp + BrowserSync and I'm trying to reload my development website when changes are made to my HTML files, but I can't seem to get it working.
I'm getting no errors in the command line, my page seems to reload but the changes I've made don't appear in the browser, unless I quit the gulp task and run it again.
This is my current setup:
var gulp = require('gulp');
var browserify = require('browserify');
var swig = require('gulp-swig');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('serve', function () {
browserSync({
server: {
baseDir: './Build'
}
});
});
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig())
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}))
});
// Default task
gulp.task('default', ['serve', 'templates', 'sass', 'js'], function() {
gulp.watch('./src/*.html', ['templates']);
gulp.watch(['./src/scss/*.scss', './src/scss/**/*.scss'], ['sass']);
gulp.watch('./src/js/*.js', ['js']);
});
Any help with this is appreciated. Thanks in advance!
The problem in this setup seems to be swig. When you check the files in ./Build, they haven't changed, so the browser is loading the files correctly. But swig does not get the changes. Disabling swig's caching feature should resolve this:
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig({
defaults: { cache: false }
}))
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}));
});