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/'));
});
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 am working with the latest version of Node, Gulp and gulp-cli. My gulpfile.js is exactly like this. Trying out gulp to teach myself.
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('default', function(){
return gulp.src("./styles/_site.scss")
.pipe(sass())
.pipe(gulp.dest("./public"));
});
When I run gulp, I get nothing at the destination. No error is thrown.
I removed the pipe to sass plugin and ran the task, which then is expected to simply copy the file to the destination), and it did.
Then I used gulp-plumber on the stream.
var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber');
gulp.task('default', function(){
try {
var bla = sass();
var blah = gulp.src("./styles/_site.scss")
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass())
.pipe(gulp.dest("./public"));
} catch(ex) {
console.log(ex);
var blah = gulp.src("./styles/_site.scss")
.pipe(gulp.dest("./public"));
} finally {
return blah;
}
});
I use vs code (again, the latest version;) to debug..
The task ran with no errors caught, even with the plumber. I am lost here and would really appreciate some suggestions.
PS: I tried out gulp-less to see if it could convert from *.less to *.css and it did. Had no issues there.
Rename _site.scss to site.scss.
gulp-sass quietly skips all files starting with an underscore. This is because as a convention, partials (i.e. files that you want to import but should not compile to a separate CSS output) must have their name starting with an underscore.
Since you intend to output a CSS file for this input SCSS file, you should not have it marked as a partial, thus you should not have a leading underscore.
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))
});
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));
});