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) ...........
Related
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.
Iam using gulp CLI version: 2.2.1 Local version: 4.0.2
The node version is 12.16.3
MY code of gulpfile.js is
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
del=require('del'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
rev = require('gulp-rev'),
cleanCss = require('gulp-clean-css'),
flatmap = require('gulp-flatmap'),
htmlmin = require('gulp-htmlmin');
gulp.task('sass', function () {
return gulp.src('./css/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./css/*.scss', ['sass']);
});
gulp.task('browser-sync', function () {
var files = [
'./*.html',
'./css/*.css',
'./img/*.{png,jpg,gif}',
'./js/*.js'
];
browserSync.init(files, {
server: {
baseDir: "./"
}
});
});
// Default task
gulp.task('default', gulp.series('browser-sync', function() {
gulp.start('sass:watch');
}));
gulp.task('clean', function() {
return del(['dist']);
});
gulp.task('copyfonts', function() {
gulp.src('./node_modules/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('imagemin', function() {
return gulp.src('img/*.{png,jpg,gif}')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('dist/img'));
});
gulp.task('usemin', function() {
return gulp.src('./*.html')
.pipe(flatmap(function(stream, file){
return stream
.pipe(usemin({
css: [ rev() ],
html: [ function() { return htmlmin({ collapseWhitespace: true })} ],
js: [ uglify(), rev() ],
inlinejs: [ uglify() ],
inlinecss: [ cleanCss(), 'concat' ]
}))
}))
.pipe(gulp.dest('dist/'));
});
gulp.task('build',gulp.series('clean', function() {
gulp.start('copyfonts','imagemin','usemin');
}));
The error I got is after running gulp build on the command line is:
[15:38:33] Starting 'build'...
[15:38:33] Starting 'clean'...
[15:38:33] Finished 'clean' after 69 ms
[15:38:33] Starting '<anonymous>'...
[15:38:33] '<anonymous>' errored after 3.57 ms
[15:38:33] TypeError: gulp.start is not a function
at C:\Users\HARIKA\Desktop\bootstrapassign1\Bootstrap4\conFusion\gulpfile.js
:74:10
[15:38:33] 'build' errored after 83 m
I dont know how to solve the erros. I even changed some of tasks to gulp.series() as per version of gulp version 4. Can anyone help me to resolve the error? Thank you in advance.
Replace these two tasks:
// Default task
gulp.task('default', gulp.series('browser-sync', function() {
gulp.start('sass:watch');
}));
gulp.task('build',gulp.series('clean', function() {
gulp.start('copyfonts','imagemin','usemin');
}));
with:
// Default task
gulp.task('default', gulp.series('browser-sync', 'sass:watch'));
gulp.task('build',gulp.series('clean', 'copyfonts','imagemin','usemin'));
gulp.start is not a part of gulp4+ - it was in v3 although not really sanctioned for use even there.
I had the same issue and perhaps found the solution:
Replace the following:
gulp.task('sass:watch', function () {
gulp.watch('./css/*.scss', ['sass']);
// Default task
gulp.task('default', gulp.series('browser-sync', function() {
gulp.start('sass:watch');
}));
And add instead:
gulp.task('sass:watch', function() {
gulp.watch('./css/*.scss', gulp.series(['sass']));
// Default task
gulp.task('default', gulp.parallel('browser-sync', 'sass:watch'));
From what I have found you will have to use gulp.series and gulp.parallel interchangeably with gulp +4.x
Now for the second part change:
gulp.task('copyfonts', function() {
gulp.src('./node_modules/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
Adding return here:
gulp.task('copyfonts', function() {
return gulp.src('./node_modules/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
And like shown in the previous answer make the last task:
gulp.task('build', gulp.series('clean','copyfonts','imagemin','usemin'));
Hope this helps!
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");
In my build process I want to put the artifacts of the build steps into .tmp/serve directory.
I managed to set up gulp-watch to fire specific tasks when I modify files in my working directory. E.q. when I modify htmls, they are built and the artifacts are pasted into desired .tmp/serve directory
I'm having problems with reloading the files from .tmp/serve with browser-sync. When I save changes in my working directory multiple times, browser-sync refreshes only the previous changes (1 change delay). I guess the reload function fires before gulp-dest finishes. Note that if I refresh browser manually the current changes appear.
Am I doing something wrong?
Build htmls task
gulp.task('html', ['styles'], () => {
return gulp.src('app/*.html')
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('.tmp/serve'))
;
});
Sever task
const reload = browserSync.reload;
gulp.task('serve', ['styles', 'fonts', 'build:scripts', 'html', 'images'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp/serve'],
routes: {
'/bower_components': 'bower_components'
}
}
});
/*********** SEE THE LINES BELOW **************/
gulp.watch([
'.tmp/serve/**/*',
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('app/*.html', ['html']);
gulp.watch('app/scripts/**/*', ['build:scripts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
You can use run-sequence to reload after a build.
Your gulpfile would become like this..
var gulp = require('gulp'),
runSeq = require('run-sequence')
...
;
gulp.task('build', ['styles', 'fonts', 'build:scripts', 'html', 'images']);
gulp.task('serve', ['build', 'watch'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp/serve'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.task('reload', function (callback) {
browserSync.reload();
callback();
});
gulp.task('watch', ['watch-styles', ...]);
gulp.task('watch-styles', function () {
gulp.watch('app/styles/**/*.scss', function () {
runSeq('styles', 'reload');
});
});
/* And so on for every watch task */
Note that run-sequence needs your tasks to either return a stream or to call a callback, otherwise it will cause gulp to pause indefinitely. Read the Doc to learn more.