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))
});
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! :)
I have been trying to convert scss to css and this is my code.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'));
});
I get no errors but it just dosnt do anything.
[05:12:54] Using gulpfile ~/Desktop/Project/gulpfile.js
[05:12:54] Starting 'sass'...
[05:12:54] Finished 'sass' after 13 ms
This is my scss file, not sure if thats useful to know.
.lol {
width: percentage(100/2);
}
Workspace.
Any help is appreciated!
You are missing a trailing slash in gulp.dest('app/css'), causing gulp to write to file named css in the app folder.
Instead, your sass task should read:
gulp.task('sass', function() {
return gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('app/css/'));
});
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 need some help, I've butchered what I had working while trying to add scss compilation and minification. I had scss working, but it made main.js not uglify. Then I switched some things and both don't work. This is my second day in Gulp, let alone .js.
It's throwing an error on the line after the last line (which is blank?) and SyntaxError: Unexpected end of input.
Here's the code: (and thanks)
/* Required */
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass');
/* 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 Task */
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
gulp.watch('app/scss/**/*.scss', ['sass']);
});
/* Gulp-Sass Task */
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('app/css'));
});
gulp.task('sass:watch', function() {
gulp.watch('app/sass/**/*.scss', ['sass']);
/* Default Task */
gulp.task('default', ['scripts', 'sass', 'watch']);
PS: Is there a better way of minifying my code that combines js and scss compiling?
You should use gulp-scss instead, I saw this when i visited gulp-scss's page
I found gulp-sass, but it doesn't seem to support actual sass, because the backend, node-sass is a port of libsass that has major limitations.
Also for minifying css why shouldn't you use gulp-clean-css ?
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));
});