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.
Related
I've got a site with a handful of modules that need their css files to exist separate from one-another, but I'd like to write the styles using scss as well as leverage gulp for autoprefixing. Is it possible to watch for changes in any scss files under a given directory tree and then write the css for the updated file as a sibling? The structure would essentially be something like this (although it could have directories nested to greater depths):
Gulpfile.js
module1
- styles1.scss
- styles1.css
- dir
-- styles2.scss
-- styles2.css
module2
- dir
-- subdir
--- styles3.scss
--- styles3.css
I've got the following Gulpfile setup elsewhere to handle my general scss compilation but I'm not sure how I might modify it to instead handle the above scenario.
// Requirements
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
gulp.task('scss', function () {
return gulp
.src('scss/style.scss')
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss([require('postcss-flexibility')]))
.pipe(autoprefixer())
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('css'))
.resume();
});
// Create 'watch' task
gulp.task('watch', function () {
return gulp
// Watch the input folder for change,
// and run `sass` task when something happens
.watch('scss/**/*.scss', gulp.series('scss'))
// When there is a change,
// log a message in the console
.on('change', function (event) {
console.log('File ' + event + ' was updated' + ', running tasks...');
})
;
});
In your scss task, change the gulp.src glob to '**/*.scss', and the gulp.dest glob to '.'.
In your watch task, change the glob to '**/*.scss' as well.
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.