I want to add Browser Sync to the gulpfile.js, and got so far as below.
It is a Drupal 8 site on MAMP / apache 80.
I have this working script when I run gulp runbsync. I would like to add it to gulp watch.
I have tried various methods to include the task inside of gulp.task('watch:css', all of which simply failed.
var browserSync = require('browser-sync').create(),
reload = browserSync.reload;
//define task
gulp.task('bsync', function () {
//spin up dev server
browserSync.init({
proxy: "dev.sitename.local",
hostname: "dev.sitename.local",
port: 3000, //even if apache is running on 80 or something else
});
//when css files change, reload browserSync
gulp.watch('./css/*.css').on('change', function () {
browserSync.reload();
});
});
//call task with 'gulp runbsync'
gulp.task('runbsync', ['bsync']);
The watch parts are:
// The default task.
gulp.task('default', ['build']);
// Build everything.
gulp.task('build', ['sass', 'drush:cc', 'lint']);
// Default watch task.
// #todo needs to add a javascript watch task.
gulp.task('watch', ['watch:css']);
// Watch for changes for scss files and rebuild.
gulp.task('watch:css', ['sass', 'drush:cc', 'lint:sass'], function () {
return gulp.watch(options.theme.scss + '**/*.scss', options.gulpWatchOptions, ['sass', 'drush:cc', 'lint:sass']);
});
I dont know if other parts of the file are nessesary so I left them out here and made a repo (you can even send a pull request)
https://github.com/petergus/D8-zurb-foundation-gulp-browsersync/blob/master/gulpfile.js
Related
I have simple starter app, I created gulpfile.js file with content below,
let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');
// Task to minify css using package cleanCSs
gulp.task('minify-css', () => {
// Folder with files to minify
return gulp.src('src/assets/styles/*.css')
//The method pipe() allow you to chain multiple tasks together
//I execute the task to minify the files
.pipe(cleanCSS())
//I define the destination of the minified files with the method dest
.pipe(gulp.dest('src/assets/dist'));
});
//We create a 'default' task that will run when we run `gulp` in the project
gulp.task('default', function() {
// We use `gulp.watch` for Gulp to expect changes in the files to run again
gulp.watch('./src/assets/styles/*.css', function(evt) {
gulp.task('minify-css');
});
});
if I run gulp minify-css it works expected, but I need it to minify on file change
But all its do log a message in cmd windows like 'Starting ...'
I don't even know what does it mean...
package.json:
..
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0"
I think you need to add return when running task minify-css, so that system knows when previous task was completed.
gulp.task('default', function() {
// We use `gulp.watch` for Gulp to expect changes in the files to run again
gulp.watch('./src/assets/styles/*.css', function(evt) {
return gulp.task('minify-css');
});
});
I am scratching my head around but can't seem to figure out whats wrong with the following gulpfile which simply watch and compile less file.
This simply won't watch less changes, I have tried all gulp, gulp watch. I have to manually run gulp after each change to compile them. Is there something wrong that causing watch to not work as expected?
Gulp Version
CLI version 1.4.0
Local version 3.9.1
NPM 4.1.2
Node v7.7.2
var gulp = require('gulp');
var less = require('gulp-less');
// gulp compile paths
var paths = {
dist: 'assets/dist'
};
gulp.task('css', function() {
return gulp.src('assets/less/styles.less')
.pipe(less({
compress: true
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('watch', function() {
gulp.watch('assets/less/*.less', ['css']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']);
Make sure you have correct path to the .less files also you need to add bowersync.reload for it to work.
gulp.task('watch', function () {
gulp.watch('assets/less/*.less', ['css']);
// init server
browserSync.init({
server: {
proxy: "local.build",
baseDir: appPath.root
}
});
gulp.watch([appPath.root + '**'], browserSync.reload);
});
gulp.task('default', ['watch']);
Newbie to using Gulp and Browser-Sync and I seem to be stuck in an infinite loop when using browserSync.reload() with files stored on a network drive.
If I run the following code for files stored on my local machine it works perfectly fine, but if I run the code on files that are on the networked drive, the 'refresh' task keeps getting run over and over again with out me making any changes to files.
var gulp = require('gulp'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
host: 'test.dev',
proxy: 'test.dev',
port: 3000
});
});
gulp.task('refresh', function () {
browserSync.reload();
// console.log('Refresh');
});
gulp.task('watch', function () {
gulp.watch('**/*.{php,inc,info}', { usePolling: true },['refresh']);
});
gulp.task('default', ['browser-sync', 'watch']);
I found a few post that seem to have a similar issue, those were resolved by updating to the latest version of Browser Sync or using { usePolling: true } on the watch task but I have had no such luck.
Any help is appreciated! Thanks!
I'm trying to set up gulp to run livereload using MAMP. Here is my gulpfile:
'use strict';
var gulp = require('gulp');
var del = require('del');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
var paths = {
elements: ['elements/**/*']
};
gulp.task('clear:cache', function () {
return del(['core/cache/**/*']).then(function(){
livereload();
console.log('live reload called');
}).catch(function(){
livereload();
});
});
gulp.task('sass', function () {
console.log('sassy live reload');
return gulp.src('assets/styles/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/styles/css'))
.pipe(livereload());
});
gulp.task('sass:watch', function () {
gulp.watch('assets/styles/scss/*.scss', ['sass']);
});
// Rerun the task when a file changes
gulp.task('watch', function() {
livereload.listen({port:8888,host:"localhost",start:true, reloadPage:"index.php"});
gulp.watch(paths.elements, ['clear:cache', 'sass:watch']);
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['sass:watch','clear:cache','watch']);
As you can see, the gulpfile is supposed to clear the cache and reload the browser whenever changes are made to files in the elements directory, and compile the sass and reload the browser whenever any scss files are changed. The cache clearing and sass compiling work fine, and both spit out the console.log messages in their respective functions.
Where I'm having trouble is getting livereload to reload the browser. I know that livereload is working but not targeting the browser at all, in fact, because I get messages in my terminal like /Applications/MAMP/htdocs/assets/styles/css/style.css reloaded.
By default the LiveReload extensions listens on port 35729. To use a different port, like 8888 in your example, you have to override the default. More infos can be found here http://feedback.livereload.com/knowledgebase/articles/195869-how-to-change-the-port-number-livereload-listens-o
You can use Live Reload Browser Page
Live Reload Browser Page
GitHub live-reload-bp
Works with NodeJs, Grunt, Gulp, WebPack. You can use any IDE if it has a function to autosave a file after editing
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.