gulp task for 2 scss

[henrikhb]

gulp task for 2 scss

[henrikhb]

If you want to add a new scss file, you just add it in one of the css folders and make sure that it's included in the corresponding _index.scss file.

If you want to compile and output different .css files in different places depending on the .scss file take a look at this example:

`
var gulp = require("gulp"),
sass = require("gulp-sass"),
maps = require("gulp-sourcemaps"),
autoprefixer = require("gulp-autoprefixer"),
merge = require("merge-stream"),
browserSync = require("browser-sync").create();

var autoprefixerOptions = {
browsers: ["last 2 versions", "> 5%", "Firefox ESR"]
};

var sass_paths = [
"./app/cms/sass/core/core.scss",
"./app/cms/sass/modules/user-management/user-management.scss",
"./app/cms/sass/modules/user-management/user-edit-create.scss",
"./app/cms/sass/modules/news/news-category.scss",
"./app/cms/sass/modules/news/news-overview.scss",
"./app/cms/sass/modules/news/news-create.scss",
"./app/cms/sass/modules/booking/booking.scss",
"./app/cms/sass/modules/settings/sitemap.scss",
"./app/cms/sass/modules/settings/cache.scss",
"./app/sass/main.scss"
];

function determineCSSDestination(destination) {
var theDestination = "";
switch (destination) {
case "./app/cms/sass/core/core.scss":
theDestination = "./app/cms/css/";
break;
case "./app/cms/sass/modules/user-management/user-management.scss":
theDestination = "./app/cms/modules/user-management/css/";
break;
case "./app/cms/sass/modules/user-management/user-edit-create.scss":
theDestination = "./app/cms/modules/user-management/css/";
break;
case "./app/cms/sass/modules/news/news-category.scss":
theDestination = "./app/cms/modules/news/css/";
break;
case "./app/cms/sass/modules/news/news-overview.scss":
theDestination = "./app/cms/modules/news/css/";
break;
case "./app/cms/sass/modules/news/news-create.scss":
theDestination = "./app/cms/modules/news/css/";
break;
case "./app/cms/sass/modules/booking/booking.scss":
theDestination = "./app/cms/modules/booking/css/";
break;
case "./app/cms/sass/modules/settings/sitemap.scss":
theDestination = "./app/cms/modules/settings/css/";
break;
case "./app/cms/sass/modules/settings/cache.scss":
theDestination = "./app/cms/modules/settings/css/";
break;
case "./app/sass/main.scss":
theDestination = "./app/css/";
}
return theDestination;
}

gulp.task("compileSass", function() {
var tasks = sass_paths.map(function(path) {
return gulp
.src(path)
.pipe(maps.init())
.pipe(sass().on("error", sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(maps.write("./"))
.pipe(gulp.dest(determineCSSDestination(path)))
.pipe(
browserSync.reload({
stream: true
})
);
});

return merge(tasks);

});

gulp.task("browserSync", function() {
browserSync.init({
proxy: "",
open: "external"
});
});

gulp.task("watch", ["browserSync", "compileSass"], function() {
gulp.watch("app/cms/sass//*.scss", ["compileSass"]);
gulp.watch("app/sass//.scss", ["compileSass"]);
gulp.watch(["app/**/.php", "!app/includes/news-latest-for-index.php", "!app/includes/news-latest-for-post.php", "!app/includes/categories-for-list.php"], browserSync.reload);
gulp.watch("app/**/*.js", browserSync.reload);
});
`

[masdab]

I finally managed it to accept 2 scss and output them to css in /dist by editing the following parts:

//////-----------------////////

   gulp.task('compileSass', function() {
      // src changed so that all .scss files in folder are used
      return gulp.src("assets/css/*.scss")
          .pipe(maps.init())
          .pipe(sass().on('error', sass.logError))
          .pipe(autoprefixer())
          .pipe(maps.write('./'))
          .pipe(gulp.dest('assets/css'))
          .pipe(browserSync.stream());
    });

    gulp.task("minifyCss", ["compileSass"], function() {
      // same as above : gulp.src takes a glob of all .css files in css folder
      return gulp.src("assets/css/*.css")
         .pipe(cssmin())
         // name each file with the suffix, rest of name will be same as before
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/assets/css'));
    });

gulp.task('clean', function() {
      // changed css item so all .css files are deleted
      del(['dist', 'assets/css/*.css*', 'assets/js/main*.js*']);
    });

//////-----------------////////

[henrikhb]

Great! Nice to hear you figured it out.