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");
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'));
I'm new in the use of task runners like Gulp or Grunt, I have chosen to use Gulp to automate my tasks because I'm familiar with Javascript language.
I succeeded to compile my .less files to .css, I even wrote a task to minify my .css files.
I would like to run watch task with BrowSync, which automatically compile .less files to .css and .css to .min.css.
Here's my code :
gulp.task('minifyCSS', () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'));});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}));});
gulp.task('watchSync', ['less', 'minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['less']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});});
The browserSync task runs well but it never compiles .css to .min.css. But when I run "gulp minifyCSS" it does the job ...
Do I miss a step ? Can anyone help me on this one ? :)
I'm nearly sure this will work:
gulp.task('minifyCSS', ['less'], () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}))
;
});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
;
});
gulp.task('watchSync', ['minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['minifyCSS']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});
});
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');
});
});