I'm using gulp for a wordpress theme development serve by mamp pro.
Here is my gulpfile.js :
var gulp = require('gulp');
var compass = require('gulp-compass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
proxy: "http://favre.test",
port:8080
})
});
gulp.task('compass', function() {
return gulp.src('assets/sass/*.scss')
.pipe(compass({
css: './',
sass: 'assets/sass',
image: 'assets/img'
}))
.pipe(gulp.dest('./'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'compass'], function (){
gulp.watch('assets/sass/**/*.scss', ['compass']);
});
As you can see browserSync with a proxy reload css when a *.scss file is changing after compass.
It works fine but firefox tab crashing when css is reloaded. Working on chrome but i was wondering why firefoxis crashing I something wrong in Gulp ?
Thanks for your answers. Don't hesitate to ask me questions if something is not clear. (french guy)
Related
I've come from Grunt to Gulp. Good so far but i can't seem to get the Sass errors to show on the site. Curently it stops the whole gulp task and i only get an error in Terminal
With Grunt the errors appreared immediately on the local site in a css content property. I liked this much better, much easier to use. Any ideas? Thanks.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy:"dummy.com"
});
gulp.watch("craft/web/sass/*.scss", ['sass']);
gulp.watch("craft/templates/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
return gulp.src("craft/web/sass/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("craft/web/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
I need to run jekyll build during gulp watch task and I did that as per the following code.
var gulp = require('gulp-help')(require('gulp')),
sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('jekyll-build', function (done) {
return cp.spawn(jekyll, ['build'], {stdio: 'inherit'})
.on('close', done);
});
gulp.task('default', ['sass'], function(){
gulp.watch(['_includes/**/*.js', '_includes/**/*._', 'assets/styles/**/*.scss'], ['jekyll-build', 'sass']);
});
When I make some changes in any file and try to save at once, command runs in terminal but it is not getting reflected in UI. I need to save twice or thrice to get the changes reflected. Not sure what's the issue or whether its the issue of the gulp watch code added here. Any help is appreciated.
When you say the changes are not reflected do you mean the browser is not refreshing?
The line to launch jekyll build is different for mac vs Windows, your looks like it is for a Mac, on Windows I use jekyll.bat on this line (jekyll, ['build'].
In your watch step you are not watching very much. Rather than try to tell gulp to watch every different thing I do the opposite and tell gulp to watch everything **/*.* and then tell it what not to watch like !_site/**/*. This also lets you watch the config file for changes.
Also, it doesn't look like you are live-reloading with browser sync, that is half the fun of using gulp with jekyll (other half is having gulp do sass processing as it is much faster than jekyll).
Here is a gulp file that I use and a link to a write up I did about it:
https://rdyar.github.io/2017/10/01/speed-up-jekyll-by-using-gulp-for-sass-and-other-assets/
var gulp = require('gulp');
var browserSync = require('browser-sync');
var cp = require('child_process');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var cssnano = require('cssnano');
var imagemin = require('gulp-imagemin');
var htmlhint = require("gulp-htmlhint");
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
// Gulp as asset manager for jekyll. Please note that the assets folder is never cleaned
//so you might want to manually delete the _site/assets folder once in a while.
// this is because gulp will move files from the assets directory to _site/assets,
// but it will not remove them from _site/assets if you remove them from assets.
/**
* Build the Jekyll Site - for windos. If you are on a Mac/linux change jekyll.bat to just jekyll
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll.bat', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload when watched files change
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('serve', ['jekyll-build'], function() {
browserSync.init({
server: "_site/"
});
});
/**
* Watch jekyll source files for changes, don't watch assets
*/
gulp.task('watch', function () {
gulp.watch(['**/*.*', '!_site/**/*','!_assets/**/*','!node_modules/**/*','!.sass-cache/**/*' ], ['jekyll-rebuild']);
});
//watch just the sass files - no need to rebuild jekyll
gulp.task('watch-sass', ['sass-rebuild'], function() {
gulp.watch(['_assets/sass/**/*.scss'], ['sass-rebuild']);
});
// watch just the js files
gulp.task('watch-js', ['js-rebuild'], function() {
gulp.watch(['_assets/js/**/*.js'], ['js-rebuild']);
});
// watch just the image files
gulp.task('watch-images', ['images-rebuild'], function() {
gulp.watch(['_assets/img/**/*.*'], ['images-rebuild']);
});
//if sass files change just rebuild them with gulp-sass and what not
gulp.task('sass-rebuild', function() {
var plugins = [
autoprefixer({browsers: ['last 2 version']}),
cssnano()
];
return gulp.src('_assets/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe( gulp.dest('_site/assets/css/') )
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('js-rebuild', function(cb) {
return gulp.src('_assets/js/**/*.js')
.pipe(uglify())
.pipe( gulp.dest('_site/assets/js/') )
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('images-rebuild', function(cb) {
return gulp.src('_assets/img/**/*.*')
.pipe( gulp.dest('_site/assets/img/') )
.pipe(browserSync.reload({
stream: true
}))
});
/**
* Default task, running just `gulp` will
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['serve', 'watch','watch-sass','watch-js','watch-images']);
//build and deploy stuff
gulp.task('imagemin', function() {
console.log('Minimizing images in source!!');
return gulp.src('_assets/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
gulp.task('w3', function() {
gulp.src("_site/**/*.html")
.pipe(htmlhint())
.pipe(htmlhint.reporter())
})
// validate from the command line instead, works better
// npm install htmlhint -g
// htmlhint _site/**/*.html
I need to perform after mix.less ('app.less') automatically reloads the page. What would not press each time F5
gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.less('app.less');
mix.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch');
});
Is it possible to use it as a gulp browser-sync ?
I’m afraid there is no way to use livereload with elixir yet.
I suggest you to quite using elixir and start using all the freedom of general versatile gulp plugins.
My recipe for live reload with Livereload:
Install Livereload plugin for Chrome
Enable it pressing its button in Chrome’s toolbar
Install gulp-modules:
npm install gulp gulp-plumber gulp-connect gulp-sass --save-dev
Create simple gulpfile (with livereload of *.scss files only) like
below.
run gulp
Example of gulpfile.js
'use strict';
var
gulp = require('gulp'),
plumber = require('gulp-plumber'),
connect = require('gulp-connect'),
sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('public/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch(['resources/assets/sass/*.scss'],
function (e) {
gulp.src(e.path)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'))
;
}
);
gulp.watch(['public/css/*.css',],
function (e) {
gulp.src(e.path)
.pipe(connect.reload())
;
}
);
});
gulp.task('server', ['watch'], function () {
connect.server({
root: 'public',
livereload: true
});
});
gulp.task('default', ['server']);
First install a plugin called laravel-elixir-livereload with
npm install --save-dev laravel-elixir-livereload
After that in your gulpfile.js write this:
var elixir = require('laravel-elixir');
require('laravel-elixir-livereload');
elixir( function(mix) {
mix.less('app.less')
.livereload();
});
Finally run
gulp watch
Documentation https://www.npmjs.com/package/laravel-elixir-livereload
You can use browsersync() without installing anything if you have Elixir 3.3 and Homestand
Run first: $ php artisan serve --host=0
On your gulpfile.js: mix.browserSync({proxy: 'localhost:8000'});
You can use the laravel-elixir-browsersync-official plugin.
Your gulpfile.js should look like this:
const elixir = require('laravel-elixir');
elixir((mix) => {
mix.less('app.less')
.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch')
.browserSync({
proxy: 'your-project.url'
})
});
I'm new to Gulp and I wanted to make use of its automatic scss compiling and browser sync. But I can't get it to work.
I stripped everything down to leave only the contents of the example on the Browsersync website:
http://www.browsersync.io/docs/gulp/#gulp-sass-css
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
I can call gulp serve. The site is showing and I get a message from Browsersync. When I modify the HTML, the page is reloaded. When however I modify the scss, I can see this:
[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms
but I have to reload manually. What am I missing?
I also faced a similar problem when I was new to browser-sync usage, the command-line was saying "reloading browsers" but the browser was not refreshed at all, the problem was I had not included body tag in my HTML page where the browser-sync can inject script for its functionality, make sure your HTML page has body tag.
You can just inject the changes instead of having to force a full browser refresh on SASS compile if you like.
browserSync.init({
injectChanges: true,
server: "./app"
});
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream({match: '**/*.css'}));
});
This is because you're calling browserSync.reload on the html watch and not on the scss watch.
Try this:
gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);
This is what I use and it work's fine in sass or any other files
gulp.task('browser-sync', function () {
var files = [
'*.html',
'css/**/*.css',
'js/**/*.js',
'sass/**/*.scss'
];
browserSync.init(files, {
server: {
baseDir: './'
}
});
});
I include this on my html, right below the body tag. It works.
<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]>
</script>
Ran into this same problem trying to reload php and js files and stream css files. I was able to use stream only by using a pipe method, which makes sense. Anyway, here's what worked for me:
gulp.watch(['./**/*.css']).on('change', function (e) {
return gulp.src( e.path )
.pipe( browserSync.stream() );
});
But, I actually prefer #pixie's answer modified:
gulp.task('default', function() {
var files = [
'./**/*'
];
browserSync.init({
files : files,
proxy : 'localhost',
watchOptions : {
ignored : 'node_modules/*',
ignoreInitial : true
}
});
});
I also had the same issue. It worked when I called the reload method as a separate task.
gulp.task('browserSync', function() {
browserSync.init(null, {
server: {
baseDir: './'
},
});
})
gulp.task('reload', function(){
browserSync.reload()
})
gulp.task('watch', ['sass', 'css', 'browserSync'], function(){
gulp.watch('*.html', ['reload']);
})
Sometimes when using the CLI you don't have the script inserted in your HTML main files so you should manually add this or use gulp.
<!-- START: BrowserSync Reloading -->
<script type='text/javascript' id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
<!-- END: BrowserSync Reloading -->
Everything is almost working, compass is compiling the CSS and a few other tasks are running to minify, rename, rev etc. The problem is that when a style change occurs LiveReload is reloading the page instead of injecting the style. If I switch back to compass watch then style injection occurs. Is it possible to have style injection with Gulp, Compass and LiveReload? I hope so because if not I will have to run compass watch in 1 terminal and gulp in another which seems a bit clunky. Here is the relevant code from the gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css'),
rev = require('gulp-rev'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
lr = require('tiny-lr'),
server = lr(),
livereload = require('gulp-livereload');
gulp.task('compass', function() {
gulp.src('./static/scss/*.scss')
.pipe(compass({
css: 'static/css',
sass: 'static/scss',
image: 'static/images',
font: 'static/fonts',
javascript: 'static/js',
comments: false,
style: 'expanded',
bundle_exec: true,
require: ['wegowise_styles/compass']
}))
.on('error', function(err) {})
.pipe(gulp.dest('./static/css/'))
.pipe(livereload(server))
.pipe(minifyCSS())
.pipe(rename({suffix: '.min'}))
.pipe(rev())
.pipe(gulp.dest('./static/production/'))
.pipe(rev.manifest())
.pipe(rename('css-manifest.json'))
.pipe(gulp.dest('./static/production/'));
});
gulp.task('clean', function() {
return gulp.src(['static/production'], {read: false})
.pipe(clean());
});
gulp.task('watch', function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
gulp.task('default', ['clean', 'watch']);
ps. I am using the LiveReload chrome extension
Yes, it is possible. I haven't seem in your code (maybe because you removed the rest of the file) when you start tiny-lr, i.e.:
var gutil = require('gulp-util');
gulp.task('tiny', function(next) {
server.listen(35729, function() {
gutil.log('Server listening on port: ', gutil.colors.magenta(port));
next();
});
});
// add as a dependency in your watch task
gulp.task('watch', ['tiny'], function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
The error might be related to the scripts task as well, so maybe include it in the question so we can take a look. Maybe, finally, there is some other task causing the issue.
In order to be sure, I just created a test here, and created a index.html file inside the static folder, pointing to css/file.css.
Created a simple static/scss/file.scss with a body background-color. I've used the same code snippet you provided for the rest of the gulpfile.
Also created a node-static server and served all files under static/ folder.
At the end, is there any other automated task involved in the building process?