gulp-sass-main

Gulp plugin to dynamically create main.scss file. For people that use a single sass file as an entry point of their project.

Install

npm install gulp-sass-main --save-dev

Usage

The basic example is as follows:

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

gulp.task('makeMain', function() {
  gulp.src(['./src/**/*.css', './src/**/*.scss'], {read: false})
    .pipe(sassMain())
    .pipe(gulp.dest('./dist'));
});

Will generate something like this:

@import "/app/src/normalize.css/normalize";
@import "/app/src/layout/layout";
@import "/app/src/widget/widget";

It plays well with other gulp plugins so you don't really need to store main.scss. Here is the usual workflow:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassMain = require('gulp-sass-main');
var sourcemaps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');

gulp.task('makeMain', function() {
  return gulp.src([
    './node_modules/normalize.css/normalize.css',
    './node_modules/bourbon/app/assets/stylesheets/_bourbon.scss',
    './src/layout/layout.scss',
    './src/**/*.scss'
  ], {read: false})
    .pipe(sassMain()) // Generate main.scss from sources.
    .pipe(sourcemaps.init()) // Start source maps.
    .pipe(sass().on('error', sass.logError)) // Compile css.
    .pipe(sourcemaps.write()) // Write source maps.
    .pipe(gulp.dest('./dist')) // Save main.css.
    .pipe(livereload()); // Reload the browser.
});