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();
});
});
Related
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??
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();
});
});
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"
});
For anyone trying to minify-html and gulp-sass and browser-sync below is my fixed gulpfile.js
I hope it helps someone as gulp can be difficult for new folks like myself.
'use strict';
var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');
var sass = require('gulp-sass');
var browsersync = require('browser-sync');
// BrowserSync proxy
gulp.task('browser-sync', function() {
browsersync({
proxy: "localhost:8888"
});
});
// BrowserSync reload all Browsers
gulp.task('browsersync-reload', function () {
browsersync.reload();
});
gulp.task('minify-html', function() {
return gulp.src('src/*.html')
.pipe(minifyHTML({ empty: true }))
.pipe(gulp.dest('dist'))
.pipe(browsersync.reload({ stream:true }));
});
gulp.task('sass', function () {
gulp.src('./src/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'))
.pipe(browsersync.reload({ stream:true }));
});
// watch task
gulp.task('watch', ['browser-sync'], function () {
gulp.watch('./src/**/*.html', ['minify-html']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
});
gulp.task('default', [ 'minify-html', 'sass', 'watch']);
Here's a quick stab I took at refactoring your gulpfile. All I've done is removed some duplicated code and split up the tasks in a more logical way. The main thing I'd suggest is that you make sure each task has a single purpose, and that you use the gulp dependency system to combine them as needed.
For future reference I'd ask the Code Review StackExchange as they are more likely to help with refactoring and code reviews.
Sorry for any mistakes, as I don't have an environment to test.
// include gulp
var gulp = require('gulp');
// include plug-ins
var minifyHTML = require('gulp-minify-html');
var minifyCSS = require('gulp-minify-css');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var paths = {
html: { src: './src/*.html', dest: './' },
css: { src: 'src/css/*.css', dest: 'css' },
};
// minify new or changed HTML pages
gulp.task('html:build', function() {
gulp.src(paths.html.src)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(paths.html.dest));
});
// CSS concat, auto-prefix and minify
gulp.task('css:build', function() {
gulp.src(paths.css.src)
.pipe(concat('styles.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(paths.html.dest));
});
gulp.task('html:watch', function() {
gulp.watch(paths.html.src, ['html:build']);
});
gulp.task('css:watch', function() {
gulp.watch(paths.css.src, ['css:build']);
});
gulp.task('serve', function() {
browserSync.init({
server: "./"
});
gulp.watch(["css/*.css", "*.html"]).on('change', browserSync.reload);
});
// default gulp tasks
gulp.task('build', ['html:build', 'css:build']);
gulp.task('watch', ['html:watch', 'css:watch']);
gulp.task('default', ['build', 'watch', 'serve']);
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']);
});