When I start gulp Google Chrome doesn't open my http://localhost:3000 and doesn't update my css file automaticaly. I have no idea what am I doing wrong.
It's my first time using Gulp, guys. Any idea to fix it? Thanks
var gulp = require('gulp')
var browserSync = require('browser-sync').create()
var sass = require('gulp-sass')
//compile sass
gulp.task('sass', function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream())
})
//move js to src/js
gulp.task('js', function(){
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js',
'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream())
})
//gulp html and scss
gulp.task('serve', gulp.parallel('sass'), function(){
browserSync.init({
server: "./src"
})
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
gulp.watch("src/*.html").on('change', browserSync.reload)
})
gulp.task('default', gulp.series('js', 'serve'))
Change this line:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
to
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'))
Your version was gulp v3, not gulp v4.
Also I would change
gulp.task('default', gulp.series('js', 'serve'))
to
gulp.task('default', gulp.series('js', 'sass', 'serve'))
so that you can simplify to:
gulp.task('serve', function(){ // removed the parallel part.
The first time you run gulp.default you may need refresh the browser if you have some changes already made to your files. Best to start the default task first and then make changes to your files.
Related
I try to get a simple workflow running where changes in the sass-file are immediately translated into css and displayed in the browser (using this tutorial: https://css-tricks.com/gulp-for-beginners/)
I looked through multiple answers to simliar questions here but couldn't find a solution.
This is my gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/**/*.sass') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
When I call gulp sass it works perfectly fine. Also, when I remove the browsersync and only use the following code the watching itself works:
gulp.task('watch', function(){
gulp.watch('app/scss/*.sass', gulp.series(['sass']));
})
There must be something wrong with the way the browsersyncing is (not) happening. Can someone help me out? Many thanks in advance!
The following is not in gulp v4 syntax:
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
Move the function into the series arguments. So try this instead:
gulp.task('watch', gulp.series('browserSync', 'sass', function(){
gulp.watch('app/**/*.sass', gulp.series('sass'));
}));
In this way gulp.task() takes 2 arguments instead of 3 - that is the gulp v4 way. That article was written in v3 syntax unfortunately, with a few warnings to change the code for v4.
I am scratching my head around but can't seem to figure out whats wrong with the following gulpfile which simply watch and compile less file.
This simply won't watch less changes, I have tried all gulp, gulp watch. I have to manually run gulp after each change to compile them. Is there something wrong that causing watch to not work as expected?
Gulp Version
CLI version 1.4.0
Local version 3.9.1
NPM 4.1.2
Node v7.7.2
var gulp = require('gulp');
var less = require('gulp-less');
// gulp compile paths
var paths = {
dist: 'assets/dist'
};
gulp.task('css', function() {
return gulp.src('assets/less/styles.less')
.pipe(less({
compress: true
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('watch', function() {
gulp.watch('assets/less/*.less', ['css']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']);
Make sure you have correct path to the .less files also you need to add bowersync.reload for it to work.
gulp.task('watch', function () {
gulp.watch('assets/less/*.less', ['css']);
// init server
browserSync.init({
server: {
proxy: "local.build",
baseDir: appPath.root
}
});
gulp.watch([appPath.root + '**'], browserSync.reload);
});
gulp.task('default', ['watch']);
I have a small problem against I'm fighting since few hours. I'd like to use gulp for watching scss files, convert them to css then reload browser.
It worked until reload browser. So sass is working with gulp but not Browsersync. Here is my gulpfile.js, maybe someone can help ?
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('webroot/css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["./**/*.css", "./**/*.php","./**/*.ctp","./**/*.js"], {
server: {
baseDir: "./",
proxy:{target:'cake.dev', ws : true}
},
logLevel: "debug",
});
});
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("webroot/css/*.scss", ['sass']);
});
Ps : I'm working with CAKEPHP 3.
So you need to tell browserSync to reload at the end of the sass task:
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('webroot/css'))
.pipe(browserSync.reload({stream:true});
});
I solved it :
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}).on('error', sass.logError))
.pipe(gulp.dest('webroot/css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["webroot/css/*.css", "webroot/js/*.js"], {
proxy : "http://cake.dev/",
});
});
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("webroot/css/*.scss", ['sass']);
});
You don't have to use server{//...} in browserSync init because that is to CREATE a server. Instead if you are on wamp you have to use simply proxy... (if you have a virtual host you must modify it and replace "require local" by "require all granted", I THINK...).
And on the "on error" condition is to not stop the program if you make an error writing your scss and saving it.
So you can make mistakes, but you are responsable to learn about it.
Thanks Everyone. Hope this will help somebody else one day.
after reading alot and trying to make my own gulpfile.js I figured out how to make it compile my "scss" to a "css", the problem is that my browser-sync doesn't work because I need a proxy (because im using .php not .html), If I write this on CMD: "browser-sync start --proxy localhost:8080/app" I can see my files, but I need it to sync every time I modify something on my "scss". All I need now is to implement the proxy thing on it and reloads everytime I save/modify the ".scss", this is my currently gulpfile.js :
var gulp = require('gulp');
var httpProxy = require('http-proxy');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var paths = {
scss: '.sass/*.scss'
};
gulp.task('sass', function () {
gulp.src('scss/style.scss')
.pipe(sass({
includePaths: ['scss']
}))
.pipe(gulp.dest('css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js"], {
server: {
baseDir: "./"
}
});
});
gulp.task('watch', ['sass', 'browser-sync'], function () {
gulp.watch(["scss/*.scss", "scss/base/*.scss", "scss/sections/*.scss", "scss/style/*.scss"], ['sass']);
});
This gulpfile.js is watching my "scss/syle.scss" and updates my "css/style.css" everytime I modify the scss file.
Have you taken a look at the browserSync options? This should give you a pretty good idea on how to set it up. It doesn't seem like you implemented it in the gulpfile you provided.
What is the proper way to use gulp-watch plugin?
...
var watch = require('gulp-watch');
function styles() {
return gulp.src('app/styles/*.less')
.pipe(watch('app/styles/*.less'))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulp.dest('build'));
}
gulp.task('styles', styles);
I don't see any results when run gulp styles.
In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
Then type gulp watch and hit enter.
If your gulpfile.js is configured properly (see example below) than you will see output like this:
[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms
Every time you save your file you'll see new output here instantly.
Here is an example of a functional gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
watchLess = require('gulp-watch-less'),
pug = require('gulp-pug'),
less = require('gulp-less'),
minifyCSS = require('gulp-csso'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('watch', function () {
gulp.watch('source/less/*.less', ['css']);
});
gulp.task('html', function(){
return gulp.src('source/html/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function(){
return gulp.src('source/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
});
gulp.task('default', [ 'html', 'js', 'css', 'watch']);
Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.
gulp.task('less', function() {
gulp.src('app/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('watch', function() {
gulp.watch(['app/styles/*.less'], ['less'])
});
Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.
This is working code I hope it helps the lurkers.
Then (for version 4+) you need to do something like this:
var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
var uglify = require('gulp-uglify'); // and here as well
gulp.task('scripts', function(done) {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('watch', function() {
gulp.watch('./src/js/*.js',gulp.series(['scripts']))
});
** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))