mrdotb
mrdotb

Reputation: 652

gulp concat scss with css

I'm currently want to improve my gulp file. I want to concat the compiled scss with normalize.css in one task using stream. Actually I'm doing it like this.

var gulp = require('gulp'),
runSequence = require('run-sequence'),
minifyCss = require('gulp-minify-css'),
sourcemap = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
scss = require('gulp-ruby-sass');

var path = {
  normalize: 'app/bower_components/normalize.css/normalize.css',
  dir: './tmp',
  scss: './app/styles/main.scss',
  css: './tmp/styles'
};

gulp.task('styles', function(callback) {
  runSequence('scss', 'css', callback);
});

gulp.task('scss',function() {
  return scss(path.scss)
   .on('error',function(err) {
      console.error('Error!', err.message);
   });
});

gulp.task('css', function() {
  return gulp.src([path.normalize, './tmp/styles/main.css'])
  .pipe(concat('main.css'))
  .pipe(sourcemap.init())
  .pipe(minifyCss())
  .pipe(sourcemap.write())
  .pipe(gulp.dest(path.css));
});

Upvotes: 1

Views: 6315

Answers (3)

zloctb
zloctb

Reputation: 11177

gulp concat JS and CSS

var gulp = require('gulp'); 
var sass = require('gulp-sass');
var concat= require('gulp-concat');
var minifyCss  = require('gulp-cssnano');

var uglify = require('gulp-uglify');
var pump = require('pump');


gulp.task('sass', function(){
  gulp.src(['css/**/*.scss' ,'css/**/*.css' ])
    .pipe(sass()) // Using gulp-sass
    .pipe(minifyCss())  
    .pipe(concat('style_all.css')) 
    .pipe(gulp.dest('build/css'))
});


gulp.task('compressJS', function (cb) {

 return gulp.src(['lib/*.js'])
        .pipe(concat('concat.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/js'))


});


gulp.watch('files-to-watch', ['tasks', 'to', 'run']);


gulp.task('default', ['sass' , 'compressJS'] , function(){
    console.log(':::default:::')
});



gulp.watch(['css/**/*.scss' ,'css/**/*.css' ], ['sass']);
gulp.watch(['lib/*.js'], ['compressJS']);

Upvotes: 1

ddprrt
ddprrt

Reputation: 7574

You can easily do this using the merge package:

var merge = require('merge2');

gulp.task('styles', function() {
  return merge(
    gulp.src(path.normalize), // our first stream
    scss(path.scss)           // our second stream
  )                           // merged at this point
  .pipe(concat('main.css'))
  .pipe(sourcemap.init())
  .pipe(minifyCss())
  .pipe(sourcemap.write())
  .pipe(gulp.dest(path.css));
})

You might even be able to initialize sourcemaps for both streams, try the {sourcemap: true} option from gulp-ruby-sass

Update

I took a bigger look into your problem and found a way to include sourcemaps all the way through:

var merge = require('merge2');
var postcss = require('gulp-postcss');
var csswring = require('csswring');

gulp.task('styles', function() {
    return merge(
        gulp.src(path.normalize)
            .pipe(sourcemaps.init()),
        scss(path.scss, {sourcemap: true})
            .pipe(sourcemaps.write())
    )
    .pipe(postcss([csswring]))
    .pipe(concat('main.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.css));
});

Be aware that gulp-minify-css sometimes returns buggy sourcemaps, that's why I replaced it with gulp-postcss

Upvotes: 3

Bass Jobsen
Bass Jobsen

Reputation: 49044

Rename normalize.css to normalize.scss;

In your ./app/styles/main.scss use: @import "../../app/bower_components/normalize.css/normalize.scss";

Also see: https://github.com/chriseppstein/sass-css-importer, which allows you:

@import "CSS:some_folder/some_css_file"

For the latest version of libSass, see: https://github.com/sass/libsass/pull/754#issuecomment-68139214

@import "file"; // load partial file.(s[ac]ss|css)
@import "file.css"; // create @import on top
@import url("file"); // create @import on top
@import url("file.css"); // create @import on top

So @import "../../app/bower_components/normalize.css/normalize" should work and import your CSS file inline.

Upvotes: 1

Related Questions