Have been unable to get Browsersync working in Gulp.
I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all.
I am using MAMP and the site works fine.
Tried a few things but limited gulpfile knowledge.
thanks in advance.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
babel = require('gulp-babel'),
browserSync = require('browser-sync').create();
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified
styles
.pipe(gulp.dest('./assets/css/'))
});
// JSHint, concat, and minify JavaScript
gulp.task('site-js', function() {
return gulp.src([
// Grab your custom scripts
'./assets/js/scripts/*.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest('./assets/js'))
});
// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
return gulp.src([
// Foundation core - needed if you want to use any of the
components below
'./vendor/foundation-sites/js/foundation.core.js',
'./vendor/foundation-sites/js/foundation.util.*.js',
// Pick the components you need in your project
'./vendor/foundation-sites/js/foundation.abide.js',
'./vendor/foundation-sites/js/foundation.accordion.js',
'./vendor/foundation-sites/js/foundation.accordionMenu.js',
'./vendor/foundation-sites/js/foundation.drilldown.js',
'./vendor/foundation-sites/js/foundation.dropdown.js',
'./vendor/foundation-sites/js/foundation.dropdownMenu.js',
'./vendor/foundation-sites/js/foundation.equalizer.js',
'./vendor/foundation-sites/js/foundation.interchange.js',
'./vendor/foundation-sites/js/foundation.magellan.js',
'./vendor/foundation-sites/js/foundation.offcanvas.js',
'./vendor/foundation-sites/js/foundation.orbit.js',
'./vendor/foundation-sites/js/foundation.responsiveMenu.js',
'./vendor/foundation-sites/js/foundation.responsiveToggle.js',
'./vendor/foundation-sites/js/foundation.reveal.js',
'./vendor/foundation-sites/js/foundation.slider.js',
'./vendor/foundation-sites/js/foundation.sticky.js',
'./vendor/foundation-sites/js/foundation.tabs.js',
'./vendor/foundation-sites/js/foundation.toggler.js',
'./vendor/foundation-sites/js/foundation.tooltip.js',
])
.pipe(babel({
presets: ['es2015'],
compact: true
}))
.pipe(sourcemaps.init())
.pipe(concat('foundation.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified
Foundation JS
.pipe(gulp.dest('./assets/js'))
});
// Update Foundation with Bower and save to /vendor
gulp.task('bower', function() {
return bower({ cmd: 'update'})
.pipe(gulp.dest('vendor/'))
});
// Browser-Sync watch files and inject changes
gulp.task('browsersync', function() {
// Watch files
var files = [
'./assets/css/*.css',
'./assets/js/*.js',
'**/*.php',
'assets/images/**/*.{png,jpg,gif,svg,webp}',
];
browserSync.init(files, {
// Replace with URL of your local site
proxy: "s18.dev",
});
gulp.watch('./assets/scss/**/*.scss', ['styles']);
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change',
browserSync.reload);
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('./assets/scss/**/*.scss', ['styles']);
// Watch site-js files
gulp.watch('./assets/js/scripts/*.js', ['site-js']);
// Watch foundation-js files
gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']);
});
// Run styles, site-js and foundation-js
gulp.task('default', function() {
gulp.start('styles', 'site-js', 'foundation-js');
});
It was in fact my lack of gulp knowledge....
On closer inspection of the gulpfile, there were 2 functions - one with BS and one without...
I was running 'gulp watch' with no joy, whereas simply running 'gulp browsersync' did the trick.
bonza.
Related
I have the following gulp task:
gulp.task("stylePipe", function(){
var postcssPlugins = [
autoprefixer({browsers: ['last 2 version']}), // autoprefixer
cssnano() // css minifier
];
gulp.src("src/sass/*.scss")
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass().on("error", sass.logError)) // scan for errors
.pipe(postcss(postcssPlugins)) // runs postcss plugins listed above
.pipe(rename({ extname: '.min.css' }))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest("dist/css")); // compile into dist
});
gulp.task("styleWatch", ["stylePipe"], browsersync.reload);
gulp.task("watch", function(){
browsersync({
server: {
baseDir: "dist/"
}
});
gulp.watch("src/sass/*.scss", ["styleWatch"]);
});
I want to watch for changes in all the subdirectories listed below
using only the main.scss as src in the gulp.src("src/sass/*.scss") (main.scss is the only file that should be preprocessed whenever there is a change in the subdirectories' files).
How can I accomplish this?
I simply modified
gulp.watch("src/sass/*.scss", ["styleWatch"]);
into
gulp.watch("src/sass/**/*.scss", ["styleWatch"]);
I am trying to move all the font-awesome fonts from the bower_components folder to my build directory, but the task isn't copying any files.
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify');
var config = {
bowerDir: 'bower_components'
}
gulp.task('fa', function() {
return
gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('assets/fonts/font-awesome/'));
});
When I run gulp fa it runs fine, but no files appear in my assets/fonts/font-awesome directory.
I know the .pipe(gulp.dest()) function works because I have a scripts function like so:
gulp.task('scripts', function(){
return gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'bower_components/foundation/js/foundation.min.js',
'assets/js/custom/app.js',
])
.pipe(concat('app.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(notify({
message: 'Scripts minified'
}));
});
Any ideas?
EDIT
My folder structure is like this:
assets/
--fonts/
----font-awesome/
gulpfile.js
bower_components/
--font-awesome/
----fonts/
------fontawesome-webfont.eot
------fontawesome-webfont.svg
------fontawesome-webfont.ttf
------fontawesome-webfont.woff
------fontawesome-webfont.woff2
I want to suggest to use gulp-copy
var copy = require('gulp-copy');
gulp.task('copy', function() {
gulp.src(['bower_components/font-awesome/fonts/*.*'])
.pipe(copy('assets/fonts/font-awesome/', { prefix: 3}));
});
I am using browser-sync and sass among other plugins, but for some reason the browser-sync doesn't inject the css, the sass is getting compiled and being watched but that's it.
here is my gulp file:
'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');
const reload = browserSync.reload;
// Compile sass files to css
gulp.task('sass', function () {
return gulp.src('./assets/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 15 versions'],
cascade: true
}))
.pipe(gulp.dest('./site/css'))
.pipe(browserSync.stream())
});
// Compile pug files to html
gulp.task('pug', () =>{
return gulp.src('_pugfiles/*.pug')
.pipe(pug())
.pipe(gulp.dest('./_include'))
.pipe(gulp.dest('./site'))
});
gulp.task('js', function () {
gulp.src("./assets/js/function.js")
.pipe(rename("js/function.js"))
.pipe(gulp.dest("./site"));
});
// the working directory
gulp.task('browser-sync', ['sass', 'pug', 'js'] ,function() {
browserSync.init({
server: {
baseDir: "./site"
},
});
});
// Watch files compiling
gulp.task('watch', function () {
gulp.watch('./assets/css/*.sass', ['sass']);
gulp.watch('./_pugfiles/*.pug', ['pug']);
gulp.watch('./site/*.html').on('change', reload);
gulp.watch('./assets/js/*.js', ['js']);
gulp.watch('./site/js/*.js').on('change', reload)
});
gulp.task('default', ['watch', 'browser-sync']);
and this is my folder structure:
app
_include
_pugfiles
_site
_assets
css
img
js
node_modules
site
so here is what i have tried so far, rebuilding it again, removed few watch tasks
also tried .pipe(browsersync.stream({match: '**/*.css'})); and files: ['!**/*.maps.css'] to ignore css map files.
maybe i have tried other things but i can't remember, i spent most of yesterday trying to fix it.
I have a pretty simple and straightforward gulpfile for sass compilation, concat, minification and browser reload on changes using a watch task that observes for *.php, *.js and *.sass.
require('es6-promise').polyfill();
var gulp = require('gulp'),
sass = require('gulp-sass');
var concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
livereload = require('gulp-livereload');
var config = {
scripts: [
'./bower_components/jquery/dist/jquery.min.js',
'./bower_components/materialize/dist/js/materialize.js',
'./js/**/*.js'
]
};
gulp.task('sass', function() {
return gulp.src('./sass/style.scss')
.pipe(sass.sync({
includePaths: ['./bower_components/materialize/sass'],
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(livereload())
.pipe(gulp.dest('./'));
});
gulp.task('scripts', function() {
return gulp.src(config.scripts)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./js/'))
.pipe(uglify())
.pipe(rename({
extname: '.min.js'
}))
.pipe(livereload())
.pipe(gulp.dest('./js/'));
});
gulp.task('copyassets', function(){
})
// default task
gulp.task('default', ['sass', 'scripts']);
gulp.task('watch', function () {
livereload.listen(35729);
gulp.watch('**/*.php').on('change', function(file) {
livereload.changed(file.path);
});
gulp.watch('./sass/**/*.scss', ['sass']);
gulp.watch('./js/**/*.js', ['scripts']);
});
I execute the default task with gulp, and it was working fine for me until a few hours ago. All of a sudden, I have started getting FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory on SASS changes.
I have tried allocating it more space with '--max-old-space-size=8192', but to no use.
I have reverted all recent changes too in my code base, but that did not seem to fix it too.
Any help or pointers will be appreciated.
I am using this in combination with a _s WP theme.
Currently I've this gulp, everytime I make a change in the application to view the changes I've to run gulp build, how can i improve this gulp file by adding a watch task so that it automatically detects that a change has been introduces somewhere in the js folder / in html files and it would automatically run the build task for me.
var gulp = require('gulp'),
csso = require('gulp-csso'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
ngAnnotate = require('gulp-ng-annotate'),
minifyHtml = require("gulp-minify-html"),
ngHtml2Js = require('gulp-ng-html2js');
gulp.task('build', function () {
gulp.src(['../css/bootstrap_min.css', '../css/inputs.css', '../css/main.css',
'../css/recording.css','../css/images.css','../css/responsive.css','../css/calendar.css'])
.pipe(concat('index.min.css'))
.pipe(csso())
.pipe(gulp.dest('../css/'));
gulp.src(['../lib/date.js', '../lib/angular/angular-1.2.17.js','../lib/angular/angular-resource.js',
'../lib/ui-bootstrap-tpls-0.11.0.js','../lib/angular-ui-router.js',
'../lib/underscore.min.js','../lib/sortable.js','../lib/localize.js','../lib/bindonce.min.js',
'../lib/screenfull.js', '../lib/zeroclipboard.min.js'])
.pipe(concat('libs.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('../lib'));
gulp.src(['../js/app.js','../js/services.js','../js/controllers.js','../js/filters.js','../js/directives.js'])
.pipe(concat('index.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('../js'));
gulp.src("../partials/*.html")
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: "Partials",
prefix: "partials/"
}))
.pipe(concat("partials.min.js"))
.pipe(uglify())
.pipe(gulp.dest("../js"));
});
gulp.task('partials', function () {
gulp.src("../partials/*.html")
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: "Partials",
prefix: "partials/"
}))
.pipe(concat("partials.min.js"))
.pipe(uglify())
.pipe(gulp.dest("../js"));
});
You can just add watch task like this
gulp.task('watch', function() {
gulp.watch('../js/**/*.js', ['build']);
gulp.watch('../css/**/*.css', ['build']);
gulp.watch('../partials/**/*.html', ['build']);
})
Hope this help!
The other answer works for older versions of gulp. The syntax changed in version 4.0.
gulp.task('watch', function() {
gulp.watch('../js/**/*.js', gulp.series('build'));
gulp.watch('../css/**/*.css', gulp.series('build'));
gulp.watch('../partials/**/*.html', gulp.series('build'));
})