I am trying to set up very simple gulp file. I am using sass and browser sync there and I move everything to the build folder. But for unknown reason the browser does not sync.
I tried solutions from many resources but nothing seem to work so far. Maybe some of you would have any idea how to fix that.
var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();
var reload = bs.reload;
gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('build/css'))
.pipe(bs.reload({stream:true}));
});
gulp.task('serve', ['styles'], function() {
bs.init({
server: "./build"
});
gulp.watch('./sass/*.scss', ['styles']);
gulp.watch('build/css/*.css').on('change', reload);
gulp.watch("*.html").on('change', reload);
});
gulp.task('default', ['serve']);
My folder structure is:
- build
- css
- index.html
- sass
- index.html
And the command prompt shows this after running gulp:
Thank you so much for any help!
Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during initial request. In order for this to work properly the <body> tag must be present.
check this out: https://browsersync.io/docs/#requirements
Related
I am new to gulp so i don't know as much good gulp plugins. I wrote a code for minifying js, css and html using gulp and its plugins which is working fine. But now i am stuck in unminifying code. I don't know which plugins to use which can easily unminify code.
guplfile.js:
var gulp = require('gulp'),
uglify = require('gulp-uglify')
htmlmin = require('gulp-html-minifier')
csso = require('gulp-csso');
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
gulp.task('min_html', function () {
gulp.src('app/**/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('min'))
});
gulp.task('min_css', function () {
gulp.src('app/**/*.css')
.pipe(csso())
.pipe(gulp.dest('min'))
});
gulp.task('minify_all', ['min_js', 'min_html', 'min_css']);
//pending
//gulp.task('unminify',[]);
Uglifying/Minifying is attended for production, you should not uglify your code while you are developing (except for testing purpose).
When you start gulp tasks, you have to make sure that you have in one part your "working code", that you will transform into a "destination code".
When you are doing this :
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
The code on which you are working on is in the app folder, and your transformed code is in the min folder (it's the destination folder).
But, if the min directory is also used in development, just disable the uglify task in development (easier to debug a not-uglifyied file).
There is no need to un-minify your sources, there are still present in app folder.
I have problem with BrowserSync on my XAMPP apache.
It is my gulpfile.js (I removed unnecessary code - is only necessary to solve the problem):
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('watch', function() {
browserSync({
startPath: '/test',
proxy: 'localhost:80'
});
});
gulp.task('default', ['watch']);
When I run the correct path to the directory of my project I have no connections. In the code of page is not JS file from BrowserSync:
project page
When I given the wrong path on in code of page 404 is JS from BrowserSync:
error 404 page
I used latest version Gulp, BrowserSync & XAMPP.
Please help me!
You are missing a couple of things:
var browserSync = require('browser-sync').create();
and in your task:
browserSync.init ({
Try those and see if that helps.
I've got liveReload working fine with scss and js, but not with html. here are my tasks...
var gulp = require('gulp'),
liveReload = require('gulp-livereload');
gulp.task('watchFiles', function () {
liveReload.listen();
gulp.watch('src/**/*.scss', ['compileSass']);
gulp.watch('src/**/*.html', ['watchHtmlFiles']);
gulp.watch('src/**/*.js', ['bundle-app']);
});
I needed to use run-sequence to assure my templates were built before bundling..and replaceIndex is a simple pipe for index.html over from 'src' to 'dist'
var gulp = require('gulp'),
runSequence = require('run-sequence'),
liveReload = require('gulp-livereload');
gulp.task('watchHtmlFiles', function (callback) {
runSequence('templates', 'bundle-app', 'replaceIndex', callback);
});
I get an error if I include ".pipe(liveReload())" as part of the callback...so I added it to the bundle-app and replaceIndex tasks. But this doesn't work....
this is now working, with no additional changes! The only thing I can attribute this sudden shift is that I was running another angular project with karma running. When that was shut down, live Reload for html files works fine....
When I change some scss file everything seems to work (scss is compiled to css file and the source files are watched):
[21:19:46] Starting 'sass'...
[BS] 1 file changed (principal.css)
[21:19:46] Finished 'sass' after 18 ms
But I need to reload the browser by hand to reflect the changes. This is my gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('default', ['sass'], function() {
browserSync.init({
proxy: "huertajalon/"
});
gulp.watch("./sass/**/*.scss", ['sass']);
gulp.watch("./*.php").on('change', browserSync.reload);
gulp.watch("./style.css").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("sass/principal.scss")
.pipe(sass())
.pipe(gulp.dest("./css"))
.pipe(browserSync.stream());
});
In other cases (for example, when I modify and save style.css) the browser reloads well.
What am I doing wrong? Thanks!
Are you using browser-sync version 2.6.0 or higher, since this is required to use browserSync.stream().
http://www.browsersync.io/docs/api/#api-stream
If not then you should update or you could try browserSync.reload({stream: true}) instead, which was the previous way to handle streams with browser-sync. If I remember correctly.
Try something like this.
gulp.task(default, ['sass'], browserSync.reload);
Also refer to http://www.browsersync.io/docs/gulp/#gulp-reload
I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.
My gulpfile.js has
gulp.task('compass', function() {
return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
.pipe(compass({
config_file: 'sites/default/themes/lsl_theme/config.rb',
css: 'css',
sass: 'scss'
}))
.pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
.pipe(notify({
message: 'Compass task complete.'
}))
.pipe(livereload());
});
with
gulp.task('scripts', function() {
return gulp.src([
'sites/default/themes/lsl_theme/js/**/*.js'
])
.pipe(plumber())
.pipe(concat('lsl.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
// .pipe(stripDebug())
.pipe(uglify('lsl.js'))
.pipe(rename('lsl.min.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
.pipe(sourcemaps.write())
.pipe(notify({
message: 'Scripts task complete.'
}))
.pipe(filesize())
.pipe(livereload());
});
and the watch function
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});
when I run gulp, the result is
[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms
and no changes are registered.
for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.
My assumption is that you are on windows? Correct me if I'm wrong.
There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out
// .pipe(notify({
// message: 'Scripts task complete.'
// }))
and see if the problem still exists.
If that does fix the issue, a solution from this thread may be helpful.
You can use the gulp-if
plugin in combination with
the os node module
to determine if you are on Windows, then exclude gulp-notify, like
so:
var _if = require('gulp-if');
//...
// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());
//...
// use like so:
.pipe(_if(!isWindows, notify('Coffeescript compile successful')))
It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.
I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.
After creating a 'dest' folder to hold the new js everything started working just peachy.