gulp concat scss with css - sass

Question

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));
});

Answer 1

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

Answer 2

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.

Answer 3

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']);