CODEWITHSUNDEEP
cssangularsassminifyconcatenation
smartmouse
smartmouse

Reputation: 14404

How to generate minified CSS from SASS file using Gulp

i'm developing my first Angular 2 app and i'm using the following folder structure:

enter image description here

I'm trying to set up the configuration file of Gulp (it is my first time) and i would get one minified style.css file from different .scss file.

I began to write the following code:

gulp.task('styles', function() {
  gulp.src('src/**/*.scss')
      .pipe(sass({
        style: 'compressed'
      }).on('error', sass.logError))
      .pipe(autoprefixer('last 2 version'))
      .pipe(gulp.dest('./css/'))
      .pipe(rename({suffix: '.min'}))
      .pipe(minifycss())
      .pipe(gulp.dest('./css/'));
});

Can you tell me the best way to concat the generated minified CSS file into unique CSS file?

EDIT: I reach the same with the following:

gulp.task('styles', function() {
  gulp.src('src/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer('last 2 version'))
      .pipe(minifycss())
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('./css/'));
});

Upvotes: 2

Views: 688

Answers (2)

G.Ani
G.Ani

Reputation: 93

You can create style.scss file & import other .scss files in it . Like this

@import "first.scss";
@import "second.scss";
@import "../third.scss";
...

after replace second line in your code with this 

gulp.src('src/style.scss')

output must be one style.min.css

Upvotes: 4

null canvas
null canvas

Reputation: 10613

This below does not include the sass task but you get the idea for one css file:

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    ts: webroot + "app/**/*.ts",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

Upvotes: 0

Related Questions