Gulp: Compile SASS to CSS in the same folder

Question

I'm trying to set up a modular workflow where, when running gulp, it will compile SASS files in a folder to CSS. Those new CSS files will be stored in the same folder.

For example, here's my current folder structure:

theme
   - modules
      - hero
         - hero.html
         - hero.scss

Here is my 'gulpfile.js':

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task( 'sass', function() {
    return gulp.src('modules/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('modules/**/*.css'))
});

However, when running gulp sass, this is what my folder structure looks like:

theme
   - **
      - *.css
         - hero
            - hero.css
   - modules
      - hero
         - hero.html
         - hero.scss

Whereas what I'm after is:

theme
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (hero.css to appear here after running gulp)

Am I far off?

According to their example, you could try `gulp.dest('modules')` See https://gulpjs.com/docs/en/api/dest#sourcemaps `dest` does not mention supporting wildcards — Ruan Mendes, Mar 26 '20 at 12:31
@Freddy please check my answer and let me know if any problem — cauchy, Mar 26 '20 at 12:59
Thanks to everyone for your answers. I've selected the best answer as I did because it allowed me to use `gulp watch` too. — Freddy, Mar 26 '20 at 13:31

Rahul · Accepted Answer · 2020-03-26T13:13:41.470

If I understand correctly you want to return .css file where .scss file exist. Here is the gulpfile.js code.

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}
function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {

    scss()

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

package.json file need devDependencies and browserlist. it will be like this.

"devDependencies": {
    "autoprefixer": "^9.7.4",
    "gulp": "^4.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2"
  },
  "browserslist": [
    "last 71 version"
  ],

use $ gulp watch running your task.

Your folder structure like this

Themes
    modules
        hero
            hero.html
            hero.scss
        header
            header.html
            header.scss
        footer
            footer.html
            footer.scss
    package.json
    gulpfile.js

It will return

Themes
    modules
        hero
            hero.html
            hero.css
            hero.scss
        header
            header.html
            header.css
            header.scss
        footer
            footer.html
            footer.css
            footer.scss
    package.json
    gulpfile.js

Hope this help!

score 2 · Answer 2 · answered Mar 26 '20 at 12:31

gulp.dest() only wants a path, it will then append the current file path to it. And sass() will already have changed the extension to css so that shouldn't be a problem either. So in your case it should work like this.

gulp.task('sass', function() {
    return gulp.src('modules/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('modules/'));
});

score 0 · Answer 3 · answered Mar 26 '20 at 12:37

gulp.src tells the Gulp task what files to use for the task,

while gulp.dest tells Gulp where to output the files once the task is completed.

So in your case it should work like this

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task( 'sass', function() {
    return gulp.src('modules/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('modules/**'))
});

Gulp: Compile SASS to CSS in the same folder

3 Answers3