Following this tutorial, I've setup a basic gulp config along with a .scss file that I want compiled into .css using gulp-sass. When I run gulp watch from the console, the watch task register fine, but nothing happens when I edit the .scss file, and I can't figure out why.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('watch', function() {
gulp.watch('sassFiles',['styles']);
});
terminal output:
shooshte#M:~/Webpages/CV2$ gulp watch
[20:38:40] Using gulpfile ~/Webpages/CV2/gulpfile.js
[20:38:40] Starting 'watch'...
[20:38:40] Finished 'watch' after 5.37 ms
You were passing 'sassFiles' (as a string) and not the sassFiles variable.
gulp.task('watch', function() {
gulp.watch(sassFiles,['styles']); // Removed '' around sassFiles
});
I also noticed you are passing the sassFiles variable into your styles task. I'm a bit foggy but I don't think this works and further more It may, as suggested, indicate a poor directory structure.
The suggested methods for how to structure a sass project vary, but all share one common factor. They suggest breaking up your sass into partials prefixed with an underscore
/styles
application.scss
_footer.scss
_header.scss
_sidebar.scss
And then importing them all into a single top level scss file. application.scss
#import "footer";
#import "header";
#import "sidebar";
You can then just tell the styles task to compile application.scss and all of the files referenced as imports will get pulled in automatically.
gulp.task('styles', function(){
gulp.src('assets/styles/sass/application.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
Related
So I can compile scss to css fine.
However, whenever I change anything in my scss file it has no effect on the page unless I build styles.
My gulp file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']); // Sass watch
// gulp.watch('dist/css/main.css');
});
// Sass compiler
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass()) // Convert Sass to CSS
.pipe(gulp.dest('app/css'))
});
// Compile css files
gulp.task('styles', function () {
return gulp.src('app/css/**/*.css')
.pipe(concatCss('main.css'))
.pipe(gulp.dest('dist/css'));
});
/** Default builds **/
// Build
gulp.task('build', ['styles']);
// Watch and build changes
gulp.task('default', ['build', 'watch']);
My index.html file linked to my dist css file is this correct also?
<link rel="stylesheet" type="text/css" href="dist/css/main.css">
All that keeps happening is I gulp watch files okay but if I change anything (something simple like body background colour) nothing happens. Not even on hard refresh. I have to gulp build styles. I am new to gulp/learning but surely building styles after every change cannot be right?
Thank you for any suggestions. I know I asked about compiling, I worked out why that wasn't working, but I've been going around in circles with this one.
I think what happens is that the watch task of gulp is only compiling the css from sass, but not concatenating the css in dist/css/main.css.
Add the task styles to the watch method of gulp and try again:
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass', 'styles']); // Sass watch
});
Hope this helps! :)
my gulp watch tasks causes an infinite loop in the terminal and it also creates a a lot more .min.js files than expected. I'm pretty new to gulp and any help pointing me in the right direction would help
Here my gulpfile:
/*
Required
*/
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
/*
Scripts Task
*/
gulp.task('scripts', function(){
gulp.src(['app/js/**/*.js', '!app/js/**/*.min.js]'])
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/js'));
});
/*
Watch Tasks
*/
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
});
/*
Default Task
*/
gulp.task('default', ['scripts', 'watch']);
You're watching for changes in the js directory, and your scripts task also puts the processed code into the js directory, which the watcher picks up and the cycle begins all over again.
You should probably put the processed files in a different directory than the source files, by changing this line: .pipe(gulp.dest('build/js'));
The alternative is to change your watcher to not watch the files with .min.js at the end, but I can see this getting really messy
How can I compile and move sass files from sass/** folder to css/** directory using Gulp?
src('sass/**/*.sass')
dest('css/**/*.css')
PS: every sass file must have it's compiled css-version (without file-concatenation)
PPS: I can't use sass --w sass:css method, because I also have to watch other files (.js, .jade) for changes
In your gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
// styles task : for generating css
gulp.task('styles', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'))
});
// watch task : which will watch for changes, and run styles task
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['styles']);
});
Then in the terminal just run the following
gulp watch
I've seen plenty of stackoverflow solutions to this, but none of the appear to work in my scenario.
My gulp watch appears to be watching the file but the output file is not being updated.
Running gulp works okay as it default is set to call the sass task, and the task successfully compiles my output css.
Here is my directory structure:
- css
- sass
* style.scss
* style.css
* gulpfile.js
and my gulpfile:
// include gulp
var gulp = require('gulp');
// include plugins
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var cssbeautify = require('gulp-cssbeautify');
var cssmin = require('gulp-cssmin');
// compile sass
gulp.task('sass', function () {
return gulp.src('./css/sass/*.scss')
.pipe(sass())
.pipe(cssbeautify())
.pipe(gulp.dest('css'));
});
// watch
gulp.task('watch', function () {
gulp.watch('./css/sass/*.scss', ['sass']);
});
// default task
gulp.task('default', ['sass']);
gulp watch gives me: (11:01 is when I saved the file)
[10:59:48] Using gulpfile ~/Sites/cla/8_0/web/intranet/reports/gulpfile.js
[10:59:48] Starting 'watch'...
[10:59:48] Finished 'watch' after 12 ms
[11:01:25] Starting 'sass'...
[11:01:25] Finished 'sass' after 24 ms
Any ideas as to why my output css isn't changing?
Many thanks!
It could be an sass synthax error issue, since you dont have any functionality in your sass taks no handle then.
Here is an example from my gulpfile
Try to add .on('error', sass.logError)), after your .pipe(sass()), here is a rough example:
gulp.task('sass',function(){
gulp.src('./src/sass/main.scss')
.pipe(sass().on('error', sass.logError))
});
BrowserSync in the gulpfile below is not showing the changes made to index.html even after it says 'Reloading Browsers' in command line as well as the 'Connected to BrowserSync' notification in Chrome.
Another odd thing that's occurring is that after the third save of the index.jade file, the rendered website in Chrome completely disappears, nothing in the rendered DOM.
I've followed ShakyShane's recipe on github (with a few tweaks). It worked without the tweaks on another project I started, but I can't see what's wrong here.
My file structure is:
project-folder
/app
/css
/jade
/js
/sass
index.html
gulpfile.js
package.json
Any help would be greatly appreciated.
/***********************************************************************************
1. DEPENDENCIES
/***********************************************************************************/
var gulp = require ('gulp'), // gulp core
plumber = require ('gulp-plumber'), // disable interuption
jade = require ('gulp-jade'), // jade compiler
sass = require ('gulp-sass'), // sass compiler
autoprefixer = require ('gulp-autoprefixer'), // sets missinb browser prefixes
browserSync = require ('browser-sync'), // inject code to all devices
reload = browserSync.reload; // browser sync reload
/*********************************************************************************
2. FILE DESTINATIONS (RELATIVE TO ASSETS FOLDER)
**********************************************************************************/
var target = {
jadeSrc : 'app/jade/**/*.jade', // source of jade files
htmlDest : 'app/', // html file destination
sassSrc : 'app/sass/**/*.sass', // source of sass files
cssDest : 'app/css', // minified css destination
jsDest : 'dist/js' // where to put minified js
};
/**********************************************************************************
3. SASS TASK
***********************************************************************************/
gulp.task ('sass', function (){
gulp.src(target.sassSrc) // get the files
.pipe(plumber()) // make sure gulp keeps runnin on errors
.pipe(sass()) // compile all sass
.pipe(autoprefixer()) // complete css with correct vendor prefixes
.pipe(gulp.dest(target.cssDest)) // file destination
.pipe(reload({stream:true}));
});
/**********************************************************************************
4. JADE TASKS
**********************************************************************************/
gulp.task('jade', function(){
var YOUR_LOCALS = {};
gulp.src(target.jadeSrc)
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest(target.htmlDest))
});
// separate watcher for browser-sync reaction to '.jade' file changes
gulp.task('jade-watch', ['jade'], reload);
/**********************************************************************************
5. BUILD SEQUENCES
**********************************************************************************/
gulp.task('default', ['sass', 'jade'], function(){
browserSync({server: target.htmlDest});
gulp.watch(target.sassSrc, ['sass']);
gulp.watch(target.jadeSrc, ['jade-watch']);
});