I have this gulpfile in my office and its working perfectly.
but when i try to use it at home i get this error and i don't know what is wrong with it.
I tried to install all the packages in the dependency and resolve all the error but I cant fix this one:
and here is my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./"
});
gulp.watch("css/*.scss", ['sass']);
gulp.watch('css/partials/*.scss', ['sass']);
gulp.watch("css/*.css").on('change', browserSync.reload);
gulp.watch("*.html").on('change', browserSync.reload);
gulp.watch("js/*.js").on('change', browserSync.reload);
});
gulp.task('sass', function() {
gulp.src('css/*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}));
gulp.src('css/partials/*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}));
});
gulp.task('default', function() {
gulp.watch('css/*.scss', ['sass']);
gulp.watch('css/partials/*.scss', ['sass']);
});
gulp.task('default', ['serve']);
Did you happen to recently update node and npm?
Since watch is not recognized as a function at all you can't get vfs to look at your local file system.
You could always try using this module https://www.npmjs.com/package/gulp-vfs
Related
Other answers were not helpful. I'm using Gulp 4 on Windows 10.
I get the following error when running 'gulp serve'
The following tasks did not complete: serve, sass
[18:48:51] Did you forget to signal async completion?
My gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('sass', function() {
return sass('./public_html/lib/scss/main.scss')
.pipe(gulp.dest('./public_html/css'))
.pipe(reload({ stream:true }));
});
gulp.task('serve', gulp.series('sass', function() {
browserSync({
server: {
baseDir: 'public_html'
}
});
gulp.watch('lib/scss/*.scss', gulp.series('sass'));
}));
Try this instead:
gulp.task('sass', function() {
return gulp.src('./public_html/lib/sass/main.scss')
.pipe(sass()).on("error", sass.logError))
.pipe(gulp.dest('./public_html/css'))
.pipe(reload({ stream:true }));
});
Note you need gulp.src, then a call to sass.
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've just started to learn gulp and I'm trying to use gulp-connect https://www.npmjs.com/package/gulp-connect.
This is my files structure
And it's my gulpfile.js file
var gulp = require('gulp'),
concatCss = require('gulp-concat-css'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect');
// server connect
gulp.task('connect', function() {
connect.server({
root: [__dirname],
livereload: true
});
});
// css
gulp.task('css', function () {
return gulp.src('css/*.css')
/*.pipe(notify('Done!'))*/
.pipe(autoprefixer({
browsers: ['> 1%', 'IE 7']
}))
.pipe(concatCss("style.css"))
.pipe(minifyCss())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('dist/'))
.pipe(connect.reload());
});
//html
gulp.task('html', function(){
gulp.src('index.html')
.pipe(connect.reload());
});
// watch
gulp.task('watch', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
// default
gulp.task('default', ['connect', 'html', 'css', 'watch']);
I don't undestand why all works correctly when I use command gulp in node.js console, but if I try to use command gulp watch I get an error in browser console
http://localhost:8080/ net::ERR_CONNECTION_REFUSED
What did I do wrong?
You're not running 'connect' task when running 'watch'.
Reformat your tasks like this
gulp.task('watch:assets', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
gulp.task('default', ['connect', 'html', 'css', 'watch:assets']);
gulp.task('watch', ['connect', 'watch:assets']);
Go back to terminal and run
gulp watch