I've installed gulp and gulp-sass using npm.
Following the examples on github for gulp and gulp-sass I've created this simple gulpfile:
var gulp = require('gulp') ;
var sass = require('gulp-sass') ;
gulp.task('default', function() {
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
}) ;
If I run 'gulp' then nothing really happens - as expected. I get back
[00:20:20] Using gulpfile ~/wa/myproj/gulpfile.js
[00:20:20] Starting 'default'...
[00:20:20] Finished 'default' after 64 μs
That's all fine and dandy.
However, when I run 'gulp sass' I get back this:
[00:21:38] Using gulpfile ~/wa/myproj/gulpfile.js
[00:21:38] Task 'sass' is not in your gulpfile
[00:21:38] Please check the documentation for proper gulpfile formatting
I've clearly got a taks defined for 'sass'. What am I missing?
It probably didn't call because it was the function was inside default, and also default needs to call the other functions, after defining it outside default.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
gulp.src('./sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function(){
gulp.watch('./sass/**/*.scss',['sass']);
});
gulp.task('default', ['sass','watch']);
I figured it out:
The 'sass' task was wrapped inside the 'default' task.
This works:
var gulp = require('gulp') ;
var sass = require('gulp-sass') ;
gulp.task('default', function() {
}) ;
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
I have faced the same issue "Task 'sass' is not in your gulpfile" when I use gulp scss command.
But when my friend ran gulp css command in command prompt, it worked properly by updating the CSS file. Please look at the below image, I hope this might help you.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
gulp.src('./scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss',['sass']);
});
This works for me. Try it out. But I have to say My SASS folder's name is 'scss'. I changed the name and deleted the default task.
Related
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.
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.
showing me this error don't know how to resolve it.
my gulpfile.js code is as follow
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass');
gulp.task('default', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
});
//style task
gulp.task('styles', function(){
gulp.src('scss/**/*.scss')
.pipe(sass())
.pip(gulp.dest('css/'));
});
If this hasn't been resolved there is a spelling mistake in the styles task. On the last line it says:
pip(gulp.dest('css/'));
I assume this needs to be:
pipe(gulp.dest('css/'));
Give that a try :)
Your gulp task would probably work with gulp-sass but you're using gulp-ruby-sass which isn't the same. Note the gulp-ruby-sass documentation:
gulp.task('sass', () =>
sass('source/file.scss') // not .pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('result'))
);
I'm trying to setup a Gulp task that converts Sass into CSS and then minifies it.
Here's my current gulpfile.js
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass','minify-css']);
});
I run gulp sass:watch and I expect it to convert main.scss into main.css which it does and then I see that it also runs minify-css, but it doesn't actually minify it.
If I run gulp minify-css, it works perfectly. Can someone please tell me how this needs to be adjusted so gulp.watch runs both tasks, one after another?
Thank you
Looks like I got this work, by removing the additional task and combining the css minify into the sass portion.
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('./css'));
});
// gulp.task('minify-css', function() {
// return gulp.src('css/*.css')
// .pipe(minifyCss({compatibility: 'ie8'}))
// .pipe(gulp.dest('css'));
// });
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass']);
});
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']))