CODEWITHSUNDEEP
gulpgulp-sass
webta.st.ic
webta.st.ic

Reputation: 5179

Merge multiple scss files into one css file

I'd like to merge all of my scss files into one compressed css file:

Structure:

I tried this two tasks, which I found in several answers and tutorials, but I always got the scss file into a duplicated css file:

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

and

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

!!! EFFECTIV RESULT !!!

or with second tried task:

??? EXPECTED RESULT ???

Any ideas?

Upvotes: 3

Views: 6042

Answers (2)

Mark
Mark

Reputation: 182661

You indicated that you want to merge your files into one file and compress that file, so you need to add two plugins to do each of those.

Gulp-concat and gulp-uglify

const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
  .pipe(sass())
  .pipe(concat('styles.css'))
  .pipe(uglify())

  // .pipe(rename({
   //  basename: "styles",
   //   suffix: ".min",
   //   extname: ".css"
  //  }))

  .pipe(gulp.dest('css'))
});

In addition, you may want to add gulp-rename to indicate that the file has been uglified/minified via a .min.css extension (and change your html link to point to that filename).

Upvotes: 11

Juandres Yepes Narvaez
Juandres Yepes Narvaez

Reputation: 163

Hope this hepls.

gulp.task('styles', () => {
  gulp.src([path.src.sass])
    .pipe(sassGlob())
    .on('error', util.log)
    .pipe(sass({
       includePaths: ['src/scss'],
    }))
    .on('error', util.log)
    .pipe(gulp.dest(path.dist.css))
});

Upvotes: 1

Related Questions