Only the first function passed to gulp.series() does fire, the rest just don't. Below is my (simplified) gulpfile.js:
gulp.task('sass', function() {
...
});
gulp.task('js', function() {
...
});
gulp.task('images', function() {
...
});
gulp.task('browserSync', function() {
browserSync.init({
proxy: 'http://127.0.0.1/protection/',
})
})
gulp.task('watch', gulp.series('browserSync', 'js', 'sass', function() {
gulp.watch('../assets/styles/**/*.scss',['sass']);
gulp.watch('../**/**/*.php', browserSync.reload);
gulp.watch('../assets/scripts/*.js', ['js']);
gulp.watch('../*.html', browserSync.reload);
}));
What am I doing wrong?
gulp.task('browserSync', function(done) {
browserSync.init({
proxy: 'http://127.0.0.1/protection/',
})
done();
})
And all other tasks either:
gulp.task('images', function() {
reurn gulp.src()...
});
or
gulp.task('images', function(done) {
...
done();
});
gulp.task('watch', gulp.series('browserSync', 'js', 'sass', function() {
gulp.watch('../assets/styles/**/*.scss', gulp.series('sass'));
gulp.watch('../**/**/*.php', browserSync.reload);
gulp.watch('../assets/scripts/*.js', gulp.series('js'));
gulp.watch('../*.html', browserSync.reload);
}));
gulp.watch('../assets/styles/**/*.scss', 'sass');
might work as well since you are only calling one function/task. I usually just future-proof it a bit with the gulp.series('sass') way of doing it it.
Gulp v4 expects a function (hence your error message) as the second parameter to gulp.watch instead of the gulp v3 array of tasks old parameter.
Related
I am learning the front-end build system currently gulp, i want to use brower-sync and the problem is when it brings up the browser it will not display my html file and it will say "Cannot GET /" error in the browser window. This is my index.js code. Help me 🙏
Thanks :)
import gulp from 'gulp';
import rename from 'gulp-rename';
import sass from 'gulp-sass';
import twig from 'gulp-twig';
import browserSync from 'browser-sync';
gulp.task('style', () => {
console.log('execute sass file');
return gulp.src('src/assets/scss/styles.scss')
.pipe(rename('css/styles.css'))
.pipe(gulp.dest('dist'));
});
gulp.task('index', () => {
console.log('execute twig');
return gulp.src('src/markup/index.twig')
.pipe(rename('html/index.html'))
.pipe(gulp.dest('dist/html'))
});
gulp.task('twig', function() {
return gulp.src('src/markup/*.twig')
.pipe(twig())
.pipe(gulp.dest('dist/html'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('sass', function () {
return gulp.src('src/assets/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', function(done) {
gulp.watch('src/assets/scss/**/*.scss', gulp.task('default'));
gulp.watch('src/markup/index.twig', gulp.task('twig'));
console.log('task twig and sass works');
done();
});
gulp.task('browser-sync', () => {
browserSync.init({
server: {
baseDir: 'dist/',
browser:"google chrome",
open: true,
}
});
});
gulp.task('start', gulp.parallel('browser-sync','twig', 'sass', 'watch'));
Web page is updated when I change the file which is imported in main.less, but styles from imported less file don't change in completed main.min.css
--gulpfile.js--
gulp.task('browser-sync', function() {
browsersync({
proxy: "nika.local",
notify: false
})
});
gulp.task('styles', function() {
return gulp.src('app/less/**/*.less')
.pipe(less())
.pipe(rename({ suffix: '.min', prefix : '' }))
.pipe(autoprefixer(['last 15 versions']))
.pipe(gulp.dest('app/css'))
.pipe(browsersync.reload( {stream: true} ))
});
gulp.task('watch', ['styles', 'js', 'browser-sync'], function() {
gulp.watch('app/less/**/*.less', ['styles']);
});
gulp.task('default', ['watch']);
--main.less--
//main.less
#import url("block/home-page.less");
creating the server with gulp-connect plugin.
the Code is fine, but when I run gulp, it start monitor the 'watch'
how can I run the server and run the watch function after creating the server.
var gulp = require("gulp"),
scss = require("gulp-scss"),
jsmin = require("gulp-jsmin"),
rename = require("gulp-rename"),
connect = require("gulp-connect");
var path = {
src: {
js: 'dist/js/**/*.js',
css: 'dist/css/**/*.scss',
img: 'dist/img/*.*',
html: '/**/*.html'
},
build: {
js: './js/',
css: './css/',
img: './img/'
}
};
/* connect server */
gulp.task("connect", function () {
connect.server({
root: './',
livereload: true
});
});
/* SASS into css */
gulp.task("styles", function () {
gulp.src(path.src.css)
.pipe(scss())
.pipe(gulp.dest(path.build.css))
.pipe(connect.reload());
});
/* minified JS */
gulp.task("scripts", function () {
gulp.src(path.src.js)
.pipe(jsmin())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(path.build.js))
.pipe(connect.reload());
});
/* html */
gulp.task("html",function(){
gulp.src(path.src.html)
.pipe(connect.reload());
});
/* watch */
gulp.task('watch', function(){
gulp.watch([path.src.html],["html"]);
gulp.watch([path.src.css],["styles"]);
gulp.watch([path.src.js],["scripts"]);
});
gulp.task("default", ["connect", 'html', 'styles', 'scripts','watch']);
If I skip the watch function then gulp create the server.
Any Help!!!
Change this :
gulp.task("default", ["connect", 'html', 'styles', 'scripts', 'watch']);
to:
gulp.task("default", ['html', 'styles', 'scripts', 'watch']);
and
gulp.task('watch', ['connect'], function(){
gulp.watch([path.src.html],["html"]);
gulp.watch([path.src.css],["styles"]);
gulp.watch([path.src.js],["scripts"]);
});
Now the 'connect' task will run before the 'watch' task starts. I think that is what you want? Also, add return statements to all your tasks. As in
gulp.task("styles", function () {
return gulp.src(path.src.css) ...........
dude ... my gulp doesn't triggered when i create new file or deleted
this is my simple code
gulp.task('serve', function() {
browserSync.init({
server: "./src"
});
gulp.watch("./src/sass/**/*.sass", {cwd:'./'}, ['sass']).on('change', browserSync.reload);
gulp.watch("./src/js/**/*.js", {cwd:'./'}, ['javascript']).on('change', browserSync.reload);
gulp.watch("./src/**/*.html", {cwd:'./'}, ['html']).on('change', browserSync.reload);
});
i miss something ?
it works
gulp.task('serve', function() {
browserSync.init({
server: "./src"
});
gulp.watch("./src/**/*.html").on('change', browserSync.reload);
});
gulp.task('default', ['serve'], function () {
gulp.watch('/project_path_task', function (event) {
console.log(event);
gulp.start('your_task_like_sass_js_or_html');
});
});
I have a simple gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var notify = require("gulp-notify");
var pngquant = require('imagemin-pngquant');
gulp.task('connect', function() {
connect.server({
root: ['./'],
livereload: true
});
});
gulp.task('sass', function() {
gulp.src(['css/**/*.scss'])
.pipe(sass({
errLogToConsole: false,
onError: function(err) {
return notify().write(err);
}
}))
.pipe(gulp.dest('build'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(connect.reload());
})
gulp.task('imagemin', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images/'));
});
gulp.task('default', function() {
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
gulp.run('connect');
})
gulp.watch('*.html', function(event) {
gulp.run('connect');
})
gulp.watch('src/images/*', function(event) {
gulp.run('imagemin');
})
})
gulp.task('start', ['connect']);
Livereload server works fine. However, when I try to edit scss or index.html files I'm getting the following error:
events.js:72
throw er; // Unhandled 'error'
^
Error: listen EADDRINUSE
at errnoException (net.js:904:11)
at Server._listen2 (net.js:1042:14)
at listen (net.js:1064:10)
at Server.listen (net.js:1138:5)
at ConnectApp.server (C:\xampp\htdo
ex.js:57:19)
at new ConnectApp (C:\xampp\htdocs\
js:37:10)
at Object.module.exports.server (C:
connect\index.js:170:12)
at Gulp.gulp.task.gulp.src.pipe.pip
smi2.0\gulpfile.js:10:11)
at module.exports (C:\xampp\htdocs\
rchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\x
de_modules\orchestrator\index.js:273:3)
Whithout gulp-connect everything works fine. I'm sure there is a small syntax error in gulpfile.js but I'm unable to find it. Please help to solve this out.
Here is a final gulpgile.js that works just fine thanx to #Rigotti:
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var notify = require("gulp-notify");
var pngquant = require('imagemin-pngquant');
gulp.task('connect', function() {
connect.server({
root: ['./'],
livereload: true
});
});
gulp.task('sass', function() {
gulp.src(['css/**/*.scss'])
.pipe(sass({
errLogToConsole: false,
onError: function(err) {
return notify().write(err);
}
}))
.pipe(gulp.dest('build'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(connect.reload());
})
gulp.task('imagemin', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images/'));
});
gulp.task('html', function () {
gulp.src('index.html')
.pipe(connect.reload());
});
gulp.task('default', function() {
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
})
gulp.watch('*.html', function(event) {
gulp.run('html');
})
gulp.watch('src/images/*', function(event) {
gulp.run('imagemin');
})
})
gulp.task('start', ['connect']);
EADDRINUSE means that the port is already in use.
On the code below you're calling the connect task in default, but connect it's called again when you change your .sass files.
gulp.task('default', function() {
// server started
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
gulp.run('connect'); // <-- problem! connect is already running!
});
...
So you're basically trying to listen to the same port you're using, giving you this error.
Remove the gulp.run('connect') inside the watchs and you're good to go.