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');
});
});
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.
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");
Currently with these lines of code I am minifying my project.
gulp.task('minify-js', function() {
gulp.src('js/*.js')
.pipe($.uglify())
.pipe(gulp.dest('./_build/'));
});
gulp.task('minify-css', function() {
gulp.src(['./css/**/*.css'])
.pipe($.rename({suffix: '.min'}))
.pipe($.minifyCss({keepBreaks:true}))
.pipe(gulp.dest('./css/'))
.pipe(gulp.dest('./_build/css/'));
});
gulp.task('minify-html', function() {
var opts = {
comments: true,
spare: true,
conditionals: true
};
gulp.src('./*.html')
.pipe($.minifyHtml(opts))
.pipe(gulp.dest('./_build/'));
});
gulp.task('fonts', function() {
gulp.src('./fonts/**/*.{ttf,woff,eof,eot,svg}')
.pipe($.changed('./_build/fonts'))
.pipe(gulp.dest('./_build/fonts'));
});
gulp.task('server', function(done) {
return browserSync({
server: {
baseDir: './'
}
}, done);
});
gulp.task('server-build', function(done) {
return browserSync({
server: {
baseDir: './_build/'
}
}, done);
});
gulp.task('clean:build', function (cb) {
del([
'./_build/'
// if we don't want to clean any file we can use negate pattern
//'!dist/mobile/deploy.json'
], cb);
});
require('events').EventEmitter.prototype._maxListeners = 100;
gulp.task('usemin', function() {
return gulp.src('./index.html')
// add templates path
.pipe($.htmlReplace({
'templates': '<script type="text/javascript" src="js/templates.js"></script>'
}))
.pipe($.usemin({
css: [$.minifyCss(), 'concat'],
libs: [$.uglify()],
nonangularlibs: [$.uglify()],
angularlibs: [$.uglify()],
controllers:[$.uglify()],
contservicesapp:[$.uglify()],
services:[$.uglify()],
appcomponents: [$.uglify()],
mainapp: [$.uglify()],
templates:[$.uglify()],
directives:[$.uglify()]
}))
.pipe(gulp.dest('./_build/'));
});
When I minify it, it is inside a folder called "_build". Inside the _build folder I have a file called "cv.pdf". I have added it to this folder because when I minify it is not included. I would like that when the project is minified my file "cv.pdf" is not deleted.
How can I do it?
Try this:
gulp.task('clean:build', function (cb) {
del([
'./_build/**',
'!./_build',
'!./_build/cv.pdf'
], cb);
});
Adapted from del: excluding a file from a directory from deletion. Which explains how to delete an entire directory except for one file. This is probably the easiest way, you could also only specifically include only css, js, html, fonts and images if the above code doesn't work. Let me know.
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) ...........