Gulp Watch Isn't Watching - gulp

I am just getting started with gulp and it is really cool. I am starting to use it by simply compiling Sass files (getting more complicated things working later). I want it to work like Sass's watch. Here is my gulpfile.js:
// Include Gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var watch = require('gulp-watch');
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['sass', 'watch']);
In theory, on gulp it should compile any sass file in the /sass/ directory then "watch" the directory for changes.


I figured it out. A syntax error:
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
Should be:
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('sass/*.scss', ['sass']);
});

Related

Adding BrowserSync to gulpfile.js

I have the following code in gulpfile.js file
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
concat = require('gulp-concat');
gulp.task('sass', function(){
gulp.src('assets/src/css/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/dist/css'));
});
gulp.task('scripts', function(){
gulp.src('assets/src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'));
});
gulp.task('default', ['sass', 'scripts']);
gulp.task('watch', function(){
gulp.watch('src/css/*.scss', ['sass']);
gulp.watch('src/js/*.js', ['scripts']);
});
I want to add browserSync to this file. The example here is containing just the sass plugin. I need to add the following
Uglify & concat the JS and CSS files.
BrowserSync to update my html files.
How can I implement the above?

Add .pipe(browserSync.stream()) in the task in the place you would like it to take place.
This should probably be the last action.
gulp.task('scripts', function(){
gulp.src('assets/src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'))
.pipe(browserSync.stream());
});

Gulp Sass is not compiling CSS file

I just started a new project but can't get my gulp sass up and running as its not compiling. I've used the same code for other projects but its now started to fail on me.
Below is my gulp.js file
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var bourbon = require("node-bourbon").includePaths;
var neat = require("node-neat").includePaths;
var cleanCSS = require('gulp-clean-css');
// 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({
includePaths: bourbon,
includePaths: neat
}))
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
// Minify main.css file
gulp.task('minify-css', function() {
return gulp.src('app/css/main.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('minified-css'));
});
gulp.task('default', ['serve']);
Also what strategies should I use to debug this issue.

.pipe(sass(your options).on("error", sass.logError))
I note that you are watching and gulp.src'ing in two different ways:
gulp.watch("app/scss/**/*.scss", ['sass']);
return gulp.src("app/scss/*.scss")
What happens if you change the .src() to the same as the .watch??

browser-sync gulp config

I am trying to improve my Gulp configuration to include browser sync. I currently use MAMP Pro using local.domain.com for each site I'm working on (WordPress sites).
I'd like to get browser-sync to work using this current setup (watches my SASS files and minifies CSS when using watch).
I cannot seem to work out how to get browser sync to work with using the domain in my MAMP Pro setup.
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var uglifycss = require('gulp-uglifycss');
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('lib/themes/domain/styles/*.scss')
.pipe(sass())
.pipe(gulp.dest('lib/themes/domain/'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('uglify', function () {
gulp.src('lib/themes/domain/style.css')
.pipe(uglifycss({
"max-line-len": 80
}))
.pipe(gulp.dest('lib/themes/domain/'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'sass', 'scripts', 'uglify']);
gulp.watch('lib/themes/domain/styles/*/*.scss', ['sass']);
gulp.watch('lib/themes/domain/styles/*.scss', ['sass']);
gulp.watch('lib/themes/domain/style.css', ['uglify']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'uglify', 'scripts', 'watch']);

I wont write the code for you, instead I'll show you how I like to do it. I run my browser-sync in a separate task, simply watch your build files for changes.
var browserSync = require('browser-sync').create();
var urlPath = "your-url.com";
gulp.task('browser-sync', function (cb) {
browserSync.init({
proxy: urlPath,
}, function() {
gulp.watch("Views/**/*.cshtml").on("change", browserSync.reload);
gulp.watch('Assets/build/scripts/**/*.js').on('change', browserSync.reload);
gulp.watch('Assets/build/styles/**/*.css').on('change', function () {
gulp.src('Assets/build/styles/**/*.css')
.pipe(browserSync.stream());
});
cb();
});
});

Using Gulp BrowserSync to render PHP files

I've been using Gulp and trying to build to some process and one is BrowserSync. Thing is I want it to live reload on PHP files but it seems to only want to render html files. How can I get around this? My gulp file is here:
// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var flatten = require('gulp-flatten');
var browserSync = require('browser-sync').create();
// Live reload (HTML Only)
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "app/build/"
}
});
gulp.watch("app/scss/*.scss", ['minify-css']);
});
// Sass Compile
gulp.task('sass', function(){
return gulp.src('app/src/scss/**/*.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/build/css/'))
.pipe(browserSync.stream())
});
// Minify CSS after Scss Compile
gulp.task('minify-css', ['sass'], function() {
return gulp.src('app/build/css/*.css')
.pipe(gulp.dest('app/build/css/'))
});
// Compress JS
gulp.task('minify-js', ['flatten'], function() {
return gulp.src('app/src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('app/build/js/'))
});
gulp.task('flatten', function() {
gulp.src('bower_components/**/')
.pipe(flatten({ includeParents: [1, 1]}))
.pipe(gulp.dest('app/build/js/'))
});
gulp.task('watch', ['browser-sync'], function (){
gulp.watch('app/src/scss/*.scss', ['minify-css']);
gulp.watch('app/src/js/*.js', ['minify-js', browserSync.reload])
})
gulp.task('default', ['watch']);

Try adding these lines:
// Reloads the page
gulp.task('php', browserSync.reload);
gulp.task('watch', ['browser-sync'], function (){
gulp.watch('app/src/scss/*.scss', ['minify-css']);
gulp.watch('app/src/js/*.js', ['minify-js', browserSync.reload]);
// Watches for .php file changes
gulp.watch("./*.php", ['php']);
});
gulp.task('default', ['watch']);

install AppServ
Put your project to C:\AppServ\www directory
Change
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "app/build/"
}
});
to
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localhost/ PUT HERE NAME OF YOUR PROJECT
FOLDER/app/build/%NAME OF YOUR PHP FILE%.php"
});

Gulp-watch is not picking up new files

I'm trying to run a task whenever a file get's changed, delete or a new file is added. The first two work, however: when a new file is added it's not being picked up.
I installed the package gulp-watch and I have this task:
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('watch', function() {
watch(
['./src/Scripts/**/*.js'],
function(ev, cb) {
console.log('test');
cb();
});
});

That was a weird problem. Removing ./ from glob fixes it.
var gulp = require('gulp');
var watch = require('gulp-watch');
gulp.task('watch', function() {
watch(['src/Scripts/**/*.js'], function(event, cb) {
console.log('test');
cb();
});
});