We Keep Coding

Combine all scss file to one css file using gulp

I have this gulpfile.js file.
Here, you can see that every .scss file is converted to the corresponding .css file but I want all .scss files will be converted to only one .css file which will be main.css. How can I do this?
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function(done) {
browserSync.init({
server: {
baseDir: 'app'
},
});
done();
})
gulp.task('watch', gulp.series('browserSync', 'sass', function() {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch("app/*.html", { events: 'all' }, function(cb) {
browserSync.reload();
cb();
});
gulp.watch('app/js/**/*.js', browserSync.reload);
}));

have you tried putting in a concat before the piping in a destination? You'll need to import the concat function found here. The following should combine your files.
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
// concat will combine all files declared in your "src"
.pipe(concat('all.scss'))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});

livereload doesn't work with gulp using watch

Not sure what is wrong, when I save index.html it build the stuff properly but it doesn't refresh like I normally use livereload. Below is my gulpfile.js
var env = require('minimist')(process.argv.slice(2)),
gulp = require('gulp'),
compass = require('gulp-compass'),
cssmin = require('gulp-cssmin'),
connect = require('gulp-connect')
gulp.task('js', function(){
return gulp.src('src/js/**/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('build/js/'))
.pipe(connect.reload());
});
gulp.task('html', function(){
return gulp.src('src/templates/**/*.html')
.pipe(gulp.dest('build/'))
.pipe(connect.reload());
});
gulp.task('watch', function(){
gulp.watch('src/templates/**/*.html',['html']);
gulp.watch('src/sass/**/*.scss', ['compass']);
gulp.watch('src/js/**/*.js', ['js']);
gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']);
});
gulp.task('connect', function() {
connect.server({
root: ['build/'],
livereload: true,
middleware: function(){
return [
modRewrite([
'^/$ /index.html',
'^([^\\.]+)$ $1.html'
])
];
}
});
});
gulp.task('default', ['js','html','watch','connect']);
Any idea what's wrong?

Gulp Browsersync causing multiple reloads with each filechange

I'm using browsersync with Gulp, running some tasks on particular filechanges. Whenever I save a file, I get 10+ [BS] Reloading Browsers... in my terminal and performance is understandably laggy.
Here are my gulpfile:
gulp.task('bowerJS', function() {
gulp.src(lib.ext('js').files)
.pipe(concat('lib.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/assets/js'));
});
gulp.task('bowerCSS', function() {
gulp.src(lib.ext('css').files)
.pipe(concat('lib.min.css'))
.pipe(gulp.dest('app/assets/css/'));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('less', function() {
gulp.src('./app/css/*.less')
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('app/assets/css'))
.pipe(browserSync.stream());
});
// Render Jade templates as HTML files
gulp.task('templates', function() {
gulp.src('views/**/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('app/src/'))
});
gulp.task('php', function() {
php.server({ base: 'app', port: 8123, keepalive: true});
});
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', 'php'], function() {
var proxyOptions1 = url.parse('http://some-site:1234');
proxyOptions1.route = '/api/hi';
browserSync({
port: 8999,
proxy: '127.0.0.1:8123',
middleware: [
proxy(proxyOptions1),
history()
],
notify: false
});
gulp.watch("app/assets/css/*.less", ['less']);
gulp.watch("app/**/*.html").on('change', browserSync.reload);
gulp.watch("app/assets/js/*.js").on('change', browserSync.reload);
gulp.watch("views/**/*.jade", ['templates']);
});
What am I doing wrong here?

use only browserSync.stream (replace browserSync.reload then) and pass option once: true like this
browserSync.stream({once: true})
this should works fine.

The awaitWriteFinish option in Chokidar fixed it for me.
Example:
browserSync.init({
server: dist.pages,
files: dist.css + '*.css',
watchOptions: {
awaitWriteFinish : true
}
});

Browser-sync not reloading after SASS compiling

I am trying to make it so after I save a change to my *.scss files that the browser-sync window reloads.
It currently works fine when I save *.html files but I am not sure how to get it working for the SASS files.
Here is my gulp file.
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
// config
var config = {
sassInput: 'sass/',
sassOutput: 'src/css/',
publicRoot: 'src/',
}
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(config.sassInput + '*.scss')
.pipe(sass())
.pipe(gulp.dest(config.sassOutput))
.pipe(browserSync.reload);
});
// vendor prefixes
gulp.task('prefix', function () {
return gulp.src(config.sassOutput)
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest(config.publicRoot));
});
// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: config.publicRoot
}
});
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch(config.sassInput + '*.scss', ['sass'], browserSync.reload);
gulp.watch(config.publicRoot + '*.html', browserSync.reload);
});
// Default Task
gulp.task('default', ['sass', 'prefix', 'browser-sync', 'watch']);

The problem was I needed to call stream().
Here is working function:
gulp.task('sass', function () {
return gulp.src(config.sassInput + '*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(config.sassOutput))
.pipe(browserSync.stream());
});

Concatenated files put into main.js just keeps stacking instead of clearing the file then adding the code

I'm trying to compile all my scripts into a single main.js file which I can then link to my index file. Problem is that all my script files are being concatenated and then just added to the main.js file, so if I save 3 times, I will basically have 3 copies of all my scripts concatenated and put in the main.js file.
I would like to either delete the main.js file each time I save and then run the concatenation, or just clean the file before adding the contents. Now if I try to delete the file using the del module, I receive an error stating that I can't delete files out of the working directory without forcing this action. I would like to avoid forcing this if possible.
I feel that there must be a more elegant way of doing this..
Here's my script task:
// Concat and compile our JS into a minified dist file
gulp.task('scripts', function() {
return gulp.src('../app/public/assets/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
//.pipe(del(['../app/public/assets/scripts/main.js'])) <-- Doesn't work without forcing
.pipe(gulp.dest('../app/public/assets/scripts'))
.pipe(gulpif(flags.build, gulp.dest('../app/dist/assets/scripts')))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulpif(flags.build, gulp.dest('../app/dist/assets/scripts')))
.pipe(notify({ message: 'Finished compiling scripts' }));
});

I usually do something like this (very simplified :) ):
var PARAMS = {
destPath: 'build',
js: [
'src/js/test1.js',
'src/js/test2.js',
// ecc...
],
// other
};
var TARGETS = {
dest: 'main.js', // dest file
extra: [
// This files are inclued only in .bundle.min.js version
// extra file here
],
js: [
'src/js/test1.js',
'src/js/test2.js',
// ecc...
]
};
gulp.task('connect', function() {
return connect.server({
livereload: true,
host: '0.0.0.0',
port: 8000
});
});
gulp.task('reload', ['build'], function () {
return gulp.src(['sandbox/**/*.html'])
.pipe(connect.reload());
});
gulp.task('watch', ['connect', 'build'], function () {
var src = [];
// other
src = src.concat(PARAMS.js);
return gulp.watch(src, ['reload']);
});
gulp.task('clean', function (done) {
return del(['build'], done);
});
gulp.task('build', ['clean'], function () {
return gulp.src(target.js);
.pipe(concat(target.dest))
.pipe(gulp.dest(PARAMS.destPath)) // Plain
.pipe(uglify())
.pipe(rename({ extname: '.min.js' })) // Minified
.pipe(gulp.dest(PARAMS.destPath))
.pipe(addsrc(target.extra))
.pipe(order(target.extra))
.pipe(concat(target.dest))
.pipe(rename({ extname: '.bundled.min.js' })) // Bundled
.pipe(gulp.dest(PARAMS.destPath));
});
gulp.task('default', ['build']);