It takes far too long usually. On my laptop it literally never finishes. The PHP watch is supposed to be checking for PHP saves in the root and in any sub-directories. I'm not sure if I have the glob correct there, and maybe that's what's causing the problem?
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var mmq = require('gulp-merge-media-queries');
var phpConnect = require('gulp-connect-php');
var autoPrefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
return gulp.src('assets/css/**/*.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(autoPrefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('assets/css'));
});
gulp.task('connect-sync', function() {
phpConnect.server({}, function (){
browserSync({
proxy: '127.0.0.1:8000'
});
});
});
gulp.task('mmq', ['sass'], function () {
gulp.src('assets/css/styles.css')
.pipe(mmq({
log: true
}))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('watch', ['connect-sync', 'sass', 'mmq'], function(){
gulp.watch('assets/css/**/*.scss', ['sass', 'mmq']);
gulp.watch('/**/*.php', browserSync.reload);
gulp.watch('assets/js/**/*.js', browserSync.reload);
// Other watchers
});
Could be that gulp checks your node_modules folder? This is known to slow gulptasks down.
Try running each gulp statement from the console, i.e. First try gulp sass, then gulp connect.
Can you post the output from your console plz?
Related
I want to be able to send the browserSync external URL as a parameter for an external node script in my gulp file. How can I get at that external URL through the browserSync object (or some other way)?
var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
});
});
gulp.task('config', shell.task([
"node scripts/someNodeScript.js browserSync.externalURL"
]));
UPDATE
Based on the excellent answer by #sven-shoenung below, I slightly tweaked his solution and am successfully using this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
var browserSyncDone = function () {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'});
};
gulp.task('default', ['browser-sync']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
browserSyncDone();
});
});
You can use browserSync.getOptions('urls') to get a Map of all access URLs. It returns something like this:
Map {
"local": "http://localhost:3000",
"external": "http://192.168.0.125:3000",
"ui": "http://localhost:3001",
"ui-external": "http://192.168.0.125:3001"
}
Note that is only available after browser-sync is successfully initialized, so you need to pass a callback function to browserSync.init() or you'll try to get the value too soon.
You won't be able to use gulp-shell for the same reason. shell.task() will be set up before browser-sync has initialized, so browserSync.getOptions('urls') isn't available yet.
I recommend you use the standard nodejs child_process.spawn() instead.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function(done) {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
done();
});
});
gulp.task('config', ['browser-sync'], function(done) {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'}).on('close', done);
});
I need help adding source map to SASS compiler in the same CSS output folder. Till now, I got to install gulp-sourcemaps module within gulpfile.js but couldn't know success to bind sourcemaps.write as gulp.task.
Any help is much appreciated :)
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
},
proxy: {
target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port]
ws: true // enables websockets
}
});
});
gulp.task('sass', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/css'))
.pipe(bs.reload({
stream: true
}));
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch("*.php").on('change', bs.reload);
});
Try this code for gulp task 'sass':
gulp.task('sass', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/css'))
.pipe(bs.reload({
stream: true
}));
});
First init sourcemaps then compile sass() after that write sourcemap in the same folder ('.')
Regards
I'm using this task since 5 months everyday and works fine,
const gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps');
var sassSourcePath = 'YourPath/scss/**/*.scss',
cssDestPath = 'YourPath/css/';
gulp.task('sass', () => {
return gulp
.src(sassSourcePath)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(cssDestPath));
});
Also recommend you the require('gulp-csso') for the production version
A complete solution for gulp-sass, map, count all files, minify:
./sass/partial_folders/index.scss
#import 'base/_reset';
#import 'helpers/_variables';
#import 'helpers/_mixins';
#import 'helpers/_functions';
#import 'base/_typography';
etc..
./gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('styles', function(){
return gulp
.src('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(concat('styles.css'))
.pipe(uglifycss({
"maxLineLen": 80,
"uglyComments": true
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./build/css/'));
});
gulp.task('default', function(){
gulp.watch('sass/**/*.scss', ['styles']);
})
I am following this tutorial, but having trouble getting browserSync to fire when I make CSS changes.
If I call gulp watch it reloads one time, and the SASS compiles to CSS automatically, but browserSync does not fire on change.
The below gist is the entire gulpfile.js
https://gist.github.com/RyanNovas/c940324270b57754e487
Looks like you are missing
var watch = require('gulp-watch');
not sure why that wouldn't throw an error. Anyway.
Here's a chunk of the below gulpfile, with relevant stuff.
// Gulpfile
var gulp = require('gulp');
var watch = require('gulp-watch');
// Server
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// define the default task, call 'serve'.
gulp.task('default', ['serve']);
// Use BrowserSync to fire up a localhost server and start a livereload. We
// inject CSS changes, and reload fully for javascript and html changes.
// http://www.browsersync.io/docs/options/
gulp.task('serve', ['sass', 'webpack'], function() {
browserSync.init({
server: "./",
notify: false,
reloadOnRestart: true,
open: false,
});
// scss
gulp.watch("./css/sass/*.scss", ['sass']);
gulp.watch("./javascript/app/**/*.scss", ['sass']);
gulp.watch("./css/styles.css").on('change', reload);
// html
gulp.watch("./index.html").on('change', reload);
gulp.watch("./javascript/app/**/*.html").on('change', reload);
// js
gulp.watch('./javascript/app/**/*.js', ['webpack']);
gulp.watch('./javascript/dist/**/*.js').on('change', reload);
});
working gulpfile that reloads browsersync without issue
gulpfile.js
var gulp = require('gulp')
var jade = require('gulp-jade')
var browserSync = require('browser-sync').create()
gulp.task('jade', function(){
gulp.src('app/shit*/*.jade', {base: 'app'})
.pipe(jade())
.pipe(gulp.dest('build'))
})
gulp.task('watch', function() {
gulp.watch('app/shit*/*.jade', ['jade'])
})
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "build"
}
})
gulp.watch("build/**/*.html", browserSync.reload)
gulp.watch("build/**/*.css", browserSync.reload)
})
gulp.task('default', ['watch', 'browser-sync'])
After saving the file, Console gives «Reloading Browsers ...», but in fact the browser does not refresh.
When opening the app in the browser, do you see the legend "Connected to BrowserSync"? otherwise the app wont reload.
Check the deployed app and browserSync are both working in the same port (by default 3000)
i had setup some gulp tasks and started gulp but gulp is running on port 3000 and my app config is to listen on port 4545 so it opens 3000 port but no any contents it displays output like Cannot GET /.
my project stucture is like
controllers
views
public
app.js
gulpfile.js
so i want gulp to listen on port defined in app.js and watch changes on public flder.
I have included gulp plugin like gulp-plumber,gulp-browser-sync
and its my gulpfile.js
var gulp = require('gulp'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
plumber = require('gulp-plumber')
gulp.task('scripts', function() {
return gulp.src('public/javascripts/**/*.js')
.pipe(plumber())
.pipe(reload({
stream: true
}));
});
gulp.task('styles', function() {
gulp.src('public/stylesheets/**/*.css')
.pipe(plumber())
.pipe(reload({
stream: true
}));
});
// gulp.task('html', function() {
// gulp.src('app/**/*.html')
// .pipe(reload({
// stream: true
// }));
// });
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('watch', function() {
gulp.watch('public/javascripts/**/*.js', ['styles']);
gulp.watch('public/stylesheets/**/*.css', ['scripts']);
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']);
You can use gulp-nodemon
var gulp = require('gulp'),
nodemon = require('gulp-nodemon')
gulp.task('develop', function () {
nodemon({
script: 'app.js',
ext: 'js',
}).on('restart', function () {
// a server restarted hook can be added here
});
});
gulp.task('default', ['develop']);
Basically it will restart automatically the server when you change a js file