title: Combine all scss file to one css file using gulp
body: <p>I have this gulpfile.js file.</p>
  <p>Here, you can see that every <strong>.scss</strong> file is converted to the corresponding <strong>.css</strong> file but I want all <strong>.scss</strong> files will be converted to only one <strong>.css</strong> file which will be main.css. How can I do this?</p>
  <pre><code>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(&quot;app/*.html&quot;, { events: 'all' }, function(cb) {
          browserSync.reload();
          cb();
      });
      gulp.watch('app/js/**/*.js', browserSync.reload);
  }));
  </code></pre>