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.
Related
I am very new to gulp and sass, but trying to create a gulpfile that will take and scss file and turn it into a css file (this seems like it is a very common thing that lots of people do). I am following along this tutorial - https://youtu.be/nusgoj74a3Y?t=1301 - but it seems to be a bit outdated.
My directory looks like this
-xxx
--gulpfile
--src
---Assets
----scss
-----default.scss
----css
My gulpfile looks like this:
'use strict';
//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
//////////////////
// - SCSS/CSS - //
//////////////////
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
//compile css
gulp.task('compile_scss', function(){
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
//detect changes in SCSS
gulp.task('watch_scss', function() {
return gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});
//run tasks
gulp.task('default', gulp.series('watch_scss'));
and when I run it I get this:
[20:39:12] Using gulpfile ~/xxx/xxx/xxx/xxx/gulpfile.js
[20:39:12] Starting 'default'...
[20:39:12] Starting 'watch_scss'...
I believe it is supposed to finish these tasks not just start them.
Also I believe it is supposed to take the scss file from the scss directory and then put a css file in the css directory which it does not do.
Any help would be great. Thanks.
you are triggering a watch there, try modifying any of your scss files, and watch the terminal transpile to CSS ;)
you could add alternatively something like
gulp.task('getCSS', gulp.series('compile_scss'));
and then run gulp getCSS to get the CSS
I am trying to configure gulp to convert SASS (*.scss) files into CSS, autoprefix and also would like to generate a sourcemap file for the compiled CSS file. I am trying to create two css files one normal and other minified version of it. Both of these CSS files needs to have sourcemaps. I have the following gulp config file however the sourcemaps generated by this is incorrect. When I run the gulp task without autoprefixer then everything is fine however with autoprefixer the sourcemaps is messed up i.e it points to the incorrect line number when opened up in a chorme dev tools.
I have tried multiple configurations like inline sourcemaps and separate sourcemaps. I even tried loading the sourcemaps before autoprefixing and then writing it to a file after autoprefixing is done.
const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const clone = require('gulp-clone');
const merge = require('merge-stream');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const sassUnicode = require('gulp-sass-unicode');
const prefix = require('autoprefixer');
const minify = require('cssnano');
const {paths} = require('./config.js');
/*
* Node Sass will be used by defualt, but it is set explicitly here for -
* forwards-compatibility in case the default ever changes
*/
sass.compiler = require('node-sass');
sass_options = {
// outputStyle: 'compressed',
outputStyle: 'compact',
// outputStyle: 'nested',
// outputStyle: 'expanded'
sourceComments: false,
precision: 10
};
prefix_options = {
browsers: ['last 2 versions', '> 5%', 'Firefox ESR'],
cascade: false
};
minify_options = {
discardComments: {
removeAll: true
}
}
// Process, compile, lint and minify Sass files
const buildStyles = function (done) {
var source = src(paths.styles.input)
.pipe(sourcemaps.init())
.pipe(sass(sass_options).on('error', sass.logError))
// .pipe(sassUnicode())
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(postcss([prefix(prefix_options)]));
// Create non-minified css file and its sourcemaps
var pipe1 = source.pipe(clone())
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.styles.output));
// Create minified css file and its sourcemaps
var pipe2 = source.pipe(clone())
.pipe(rename({ suffix: '.min' }))
.pipe(postcss([minify(minify_options)]))
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.styles.output));
return merge(pipe1, pipe2);
};
I expect correct sourcemaps even after autoprefixing however with the current setup I am getting incorrect line numbers. (for all the styles of a child element in a nested element in the source .scss file the sourcemap points to the root element).
For instance, in the below example, when I inspect h2 element the sourcemaps points to the root element .shopping-cart (line#445) instead of (line#459)
enter image description here
Is there a reason why you call sourcemaps.init twice within buildStyles -> source?
sourcemaps.init is supposed to come before sourcemaps.write. In your code, you have it the other way around forsourceinbuildFiles`.
Honestly, to me it just looks like your build is more complicated than it needs to be, and that is causing problems.
See docs for reference
Also, why do you need the non-minified code if you have sourcemaps?
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'));
});
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.