Good morning,
My task created at gulpfile.js is following:
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('../assets/css/'));
});
when I try to run gulp sass I am getting this info:
Starting 'sass'...
Finished 'sass' after 20 ms
and my css file is not creating (I have obviously created scss file before).
What may be the reason of my issue?
Remove the underscore from the name of scss file. Underscores are for partials. Also, / is root directory and ./ is for the current directory. Read this
Update your Gulpfile.js:
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./../assets/css'));
});
Related
I am using GULP to compile my scss files and trying trying to compile it down into a single styles.css file. However when I run gulp sass it converts the scss files down to css but also replicates them instead of compiling them all down into one single file.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./src/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./src/sass/**/*.scss', ['sass']);
});
file structure
--gulpfile.js
--src
--css
--sass
--themes
--module.scss
--tm-1.scss
--styles.scss
when i run gulp sass the css output ends up being:
--css
--styles.css
--themes
--module.css
--tm-1.css
which all I want here is one single styles.css file and cant seem to understand what I'm missing here.
I have fixed the issue by changing the line
return gulp.src('./src/sass/**/*.scss')
to:
return gulp.src('./src/sass/styles.scss')
I am trying to use gulp to convert the scss to css. I am making changes in the scss and nothing is changing in the css. Anyone any ideas on this ? Thanks
My file structure is this :
index.html
app/scss/styles.scss
app/css/styles.css
file structure image
And my gulp file contains this :
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('app/scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
});
gulp.task("watch", function() {
gulp.watch("app/scss/**/*.scss", ['sass']);
});
Change the path of the files and dest to the following
gulp.task("sass", function () {
return gulp
.src("./app/scss/styles.scss")
.pipe(sass())
.pipe(gulp.dest("./app/css"))
});
Using gulp-sass automatically calls the file that is compiled to css style.css. Does anyone know how this filename can be modified? i.e. so I can change it to style2.css
Please see gulpfile.js below.
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp
.src('./dev/style.scss')
.pipe(sass())
.pipe(gulp.dest('./prod/css'));
});
gulp.task('default', ['sass']);
Try gulp-rename - looks pretty easy.
I just started to use Gulp. This code is used to compress a scss file to css. I can't figure out how to keep one of the css files uncompressed.
This is what I want it to be:
/assets/css/custom.css
/assets/css/custom.min.css
Code:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('assets/scss/custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('default',function() {
gulp.watch('assets/scss/**/*.scss',['styles']);
});
What you could do is expand your task so that it writes out the uncompressed version, then compresses it, renames it, then finally writes it out again.
var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
gulp.task('styles', function() {
gulp.src('assets/scss/custom.scss')
.pipe(sass())
.pipe(gulp.dest('./assets/css/'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/css/'));
});
Note that you'll need to add the gulp-rename plugin to your dependencies. You could also use a dedicated minifier (such as gulp-minify-css) rather than the SASS plugin to minify your CSS.
I have following task which compiles *.scss files to scc, minifies them and concatenates to one css file.
gulp.task("scss-to-css", ["clean-css"], function () {
return gulp.src(pathToScssFiles)
.pipe(sass())
.pipe(minifyCss({}))
.pipe(concat("app.min.css"))
.pipe(gulp.dest(contentDir));
});
Is it possible to add sourcemap from app.min.css to *.scss files?
I recommend for using the gulp-ruby-sass module instead of gulp-sass.
When I tried to make source map like you, I failed to get the source map of original each scss file. So I'm looking for other way, the below gulpfile code seemed to be better.
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var minifyCss = require('gulp-minify-css');
//var sass = require('gulp-sass');
var sass = require('gulp-ruby-sass');
gulp.task('scss-to-css', function() {
return sass('scss/*.scss', { sourcemap: true })
.pipe(sourcemaps.write())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(minifyCss({}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe( concat("app.min.css"))
.pipe(sourcemaps.write())
.pipe(gulp.dest( './build' ));
});
gulp.task('default', ['scss-to-css']);
Before you run gulp, gem install sass is required.
Please refer to the github example repo.