Link to Github Repo: https://github.com/janschloss/boilerplate
My problem is that only scss changes get recognized by BrowserSync in Gulp (no html or js or /img changes). I guess that is because scss changes are streamed directly. Weirdly I had one build which recognized html and img changes though I can't find that again.
Does someone see the mistake?
"use strict";
// Define packages
var gulp = require('gulp'),
sass = require('gulp-sass'),
clean = require('gulp-clean'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
strip = require('gulp-strip-comments'),
browserSync = require('browser-sync');
// Define file paths
var scssSrc = 'src/scss/**/*.scss',
jsSrc = 'src/js/*.js',
htmlSrc = 'src/*.html',
imgSrc = 'src/img/*';
// BrowserSync config
gulp.task('browserSyncInit', function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
gulp.watch('./dist/*').on('change', browserSync.reload);
});
// Concat scss files, compile compressed to css, prefix css, strip comments and create sourcemap
gulp.task('sass', function() {
return gulp.src(scssSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('main.min.scss'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefixer())
.pipe(strip.text())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Concatenate, uglify, strip comments and create sourcemap for js files
gulp.task('js', function() {
return gulp.src(jsSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(strip())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));
});
// Image optimization
gulp.task('img', function () {
return gulp.src(imgSrc)
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/img'));
});
// Clean task
gulp.task('clean', function() {
return gulp.src('dist')
.pipe(clean());
});
// Copy html
gulp.task('copy', function() {
return gulp.src(htmlSrc)
.pipe(gulp.dest('dist/'));
});
// Default Task
gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () { //todo asynchronous
gulp.watch(scssSrc, ['sass']);
gulp.watch(jsSrc, ['js']);
gulp.watch(imgSrc, ['img']);
gulp.watch(htmlSrc, ['copy']);
});
I think
gulp.watch('./dist/*').on('change', browserSync.reload);
is the relevant line. Is there anything wrong with my path?
My relevant folder structure looks like:
gulpfile.js
src
dist
Changes are made in src and copied over to dist on runtime with gulp.
Thanks!
I can't explain it. But when I remove your watch call from the browserSyncInit task and put it in the callback for the default task along side the other watches, everything works fine.
Relevant pieces of code:
// BrowserSync config
gulp.task('browserSyncInit', function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
});
// Default Task
gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () { //todo asynchronous
gulp.watch(scssSrc, ['sass']);
gulp.watch(jsSrc, ['js']);
gulp.watch(imgSrc, ['img']);
gulp.watch(htmlSrc, ['copy']);
gulp.watch('./dist/**/*').on('change', function () {
console.log("Watch hit");
browserSync.reload();
});
});
Is this ideal at all for your gulp file? I can kind of understand the thinking of having the watch originally triggered inside the other task.
Very weird thing I noticed; Sometimes the DIST watch would take and all the other watches wouldn't. As if there is a race condition happening on which ones get registered and the others get overwritten. When they were separated like you had them originally, either SRC watches worked or DIST watches worked. I could edit files in DIST directly when the DIST watch was working and trigger reload.
Keeping all the watches together in that CB function works for me using your github project.
I also noticed another unrelated issue. Rerunning your gulp file required me to rm -rf dist first other wise I got errors.
I think the problem is with the glob: './dist/*' - it will only watch the contents of dist. I think you want './dist/**/*' to watch the folder and all subfolders.
Related
I am trying to convert my sass to compressed-css and javascript to uglified-js. And watch both scss and js changes
my code is working but when I tried saving a js file, it goes into a unstoppable loop.
Here is my code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('sass', function(done){
gulp.src('public/sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'})) // Using gulp-sass
.pipe(gulp.dest('public/stylesheets'))
done();
});
gulp.task('scripts', function(done){
gulp.src('public/javascripts/**/*.js')
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(gulp.dest('public/javascripts'))
done();
});
gulp.task('watch', function(){
//I made .scss and .js into an array so they will both be watched
gulp.watch(['public/sass/**/*.scss', 'public/javascripts/**/*.js' ], gulp.series('sass', 'scripts', function(done) {
done();
}))
})
Now when I run gulp watch it is working but then when I save a js file, I goes into a saving loop, It's saves and saves and saves nonstop.
I have made scss work with this code
gulp.task('watch', function(){
gulp.watch('public/sass/**/*.scss', gulp.series('sass', 'scripts', function(done) {
done();
}))
})
But I have no idea how I can make .js files be watched.
I searched google for possible answer but only find the older version solution. Is there a way I can do this with gulp4?
I also tried gulp.parallel but it still looped
Please help. Thanks
Your original code:
gulp.task('watch', function(){
//I made .scss and .js into an array so they will both be watched
gulp.watch(['public/sass/**/*.scss', 'public/javascripts/**/*.js' ], gulp.series('sass', 'scripts', function(done) {
done();
}))
})
should be
gulp.task('watch', function(done){
// added done above too
gulp.watch('public/sass/**/*.scss', gulp.series('sass') )
gulp.watch('public/javascripts/**/*.js', gulp.series('scripts') )
done();
})
Your code triggers both 'sass' and 'scripts' tasks when either a scss or js file is modified, which is wasteful (for example, the 'sass' task will start when a js file is altered but not actually do anything with that js file but will needlessly run the sass re-compilation although no scss file changed).
I solved this by doing this:
gulp.task('watch', function(){
//I added the src folder instead of the glob **(two asterisk)
gulp.watch(['public/sass/**/*.scss', 'public/javascripts/src/*.js'], gulp.series('sass', 'scripts', function(done) {
done();
}))
})
I don't know why this happened but it's working now
I have an app is in iis, it is an app made in angularjs and webapi C # 2.0, I would like to create a task that updates the browser as soon as I save any js file.
Version of gulp: 3.9.1
gulp.task('livereload', function () {
gulp.watch(config.files.js);
});
gulp-livereload
A lightweight gulp plugin for livereload to be used with the
livereload chrome extension or a livereload middleware.
Simple to setup:
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('dist'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('less/*.less', ['less']);
});
Browsersync
There's no official Browsersync plugin for Gulp, because it's not
needed! You simply require the module, utilise the API and configure
it with options.
The new cool kid, most have already moved to it.
Streams are supported in Browsersync, so you can call reload at
specific points during your tasks and all browsers will be informed of
the changes. Because Browsersync only cares about your CSS when it's
finished compiling - make sure you call .stream() after gulp.dest.
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
// or
// proxy: 'yourserver.dev'
});
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']);
For a manual reload:
// ...
var reload = browserSync.reload;
// Save a reference to the `reload` method
// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({/* ... */});
gulp.watch("*.html").on("change", reload);
});
Why Browsersync is better?
It is not constrained to a single device, it works across desktop and
mobile devices at the same time. It will update code changes,
synchronize scroll positions and form inputs automatically across all
browsers and devices.
I am unable to live-reload LESS and Jade files using Aglio's --server option or gulp paired with connect's livereload option and the gulp-aglio plugin.
Is this due to caching? Or a limitation of connect's live reload capability?
The only way to make my changes render is to ctrl-C and run gulp again.
Here is my gulpfile.js:
var
gulp = require('gulp'),
aglio = require('gulp-aglio'),
connect = require('gulp-connect'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch')
;
gulp.task('docs', function(){
gulp
.src('docs/index.apib')
.pipe(plumber())
.pipe(aglio({
themeTemplate: 'docs/templates/triple.jade',
themeStyle: 'docs/styles/layout-default.less',
themeVariables: 'docs/styles/variables-default.less',
themeFullWidth: true
}))
.pipe(gulp.dest('docs'))
;
});
gulp.task('server', function(){
connect.server({
livereload: true,
root: ['docs']
});
});
gulp.task('livereload', ['docs'], function(){
gulp
.src(['docs/*.apib'])
.pipe(plumber())
.pipe(connect.reload())
;
});
gulp.task('watch', function() {
gulp.watch(['docs/*.apib', 'docs/*.md', 'docs/styles/*.less', 'docs/templates/*.jade'], ['docs', 'livereload']);
})
gulp.task('default', ['docs', 'server', 'livereload', 'watch']);
gulp.task('build', ['docs']);
This is currently not possible. The livereload functionality is for reloading the input API Blueprint file only. All of the theme files are cached so that they only get loaded once.
Question: what's your use case for this feature?
After changing my project to be organized into src/ and dist/ folders, my changes aren't being compiled and my browsersync task is no longer reloading the page. If I change the color of a div for instance, the color is not updated even if I stop and restart the gulp task. So my question is, how do I change my gulp tasks to watch for changes in the new file structure I am using, and how do I trigger the reload task once the watch task recognizes a change to a file? I think the reload task works, on a previous working version of this gulpfile gulp.watch was working so it doesn't appear to be a problem with that. I tried changing gulp.watch to browserSync.watch as per this answer but that didn't fix it.
I'm guessing this is a problem with my watch task or the browsersync.init but I'm totally stumped.
To be clear, I am making a static webpage using Jade, Bourbon Neat, SCSS, Gulp, and Browsersync.
Here's a link to the full GitHub repo for this project if that helps!
This is my current file structure:
/
dist/
css/
js/
index.html
node_modules/
src/
jade/
js/
scss/
.gitignore
gulpfile.js
package.json
And this is my gulpfile.js:
// VARIABLES
var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var neat = require('node-neat').includePaths;
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// TASKS
// Jade task
gulp.task('jade', function() {
return gulp.src('src/jade/**/*.jade')
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('dist/'))
});
// SCSS task
gulp.task('scss', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({ style: 'compressed',
noCache: true,
includePaths: neat }))
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/css'))
});
// JS task
gulp.task('js', function() {
return gulp.src('src/js/**/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/js/'))
});
// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
gulp.watch('dist/**/*.html', reload);
gulp.watch('src/scss/**/*.scss', ['scss', reload]);
gulp.watch('src/**/*.jade', ['jade']);
gulp.watch('src/**/*.js', ['js']);
});
// Start Browsersync server
gulp.task('browser-sync', function() {
browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], {
server: {
baseDir: "dist/"
}
});
});
// Default task
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']);
I have pulled your repo and made some fixes, will push under the "fixes" branch. Few things:
Your index.html was referencing your unminified css, while you only exporting minified.
the watch list needed the subfolders prefxied, so gulp.watch('src/js/**/*.js', ['js']); and not gulp.watch('src/**/*.js', ['js']);
Your browserSync.init was referencing the wrong directories (src and not dist).
What worked for me was to switch gulp.watch to browserSync.watch. BrowserSync's documentation indicates that this feature requires at least version 2.6.0. So you may need to update your version of BrowserSync if you are not using that version.
I need some help, I've butchered what I had working while trying to add scss compilation and minification. I had scss working, but it made main.js not uglify. Then I switched some things and both don't work. This is my second day in Gulp, let alone .js.
It's throwing an error on the line after the last line (which is blank?) and SyntaxError: Unexpected end of input.
Here's the code: (and thanks)
/* Required */
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass');
/* Scripts Task */
gulp.task('scripts', function(){
gulp.src(['app/js/**/*.js', '!app/js/**/*min.js'])
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/js'));
});
/* Watch Task */
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
gulp.watch('app/scss/**/*.scss', ['sass']);
});
/* Gulp-Sass Task */
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('app/css'));
});
gulp.task('sass:watch', function() {
gulp.watch('app/sass/**/*.scss', ['sass']);
/* Default Task */
gulp.task('default', ['scripts', 'sass', 'watch']);
PS: Is there a better way of minifying my code that combines js and scss compiling?
You should use gulp-scss instead, I saw this when i visited gulp-scss's page
I found gulp-sass, but it doesn't seem to support actual sass, because the backend, node-sass is a port of libsass that has major limitations.
Also for minifying css why shouldn't you use gulp-clean-css ?