How to use gulp-sass - 10 common examples

gulp.task('compile-styles', () => {
  return gulp.src(sassPaths.src)
    .pipe(plumber((error) => {
      console.log(error);
      this.emit('end');
    }))
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gcmq())
    .pipe(cssnano())
    // .pipe(uncss({
    //   html: [dirs.dest + '/**/*.html']
    // }))
    .pipe(rename({
      suffix: ".min"
    }))
    .pipe(gulpIf(isDevelopment, sourcemaps.write('.')))
    .pipe(gulp.dest(sassPaths.dest))
    .pipe(browserSync.reload({stream: true}));
});

run(watching = false) {
    // add debug for importing problems (can be very helpful)
    if(this.config.debug && this.config.options.importer === undefined) {
      this.config.options.importer = (url, prev, done) => {
        this.debug(`importing ${url} from ${prev}`)
        done({file: url})
      }
    }

    return this.gulp.src(this.config.source.glob, this.config.source.options)
      .pipe(gulpif(this.config.debug, debug(this.debugOptions())))
      .pipe(sourcemaps.init())
      .pipe(sass(this.config.options))
      .on('error', (error) => {
        this.notifyError(error, watching)
      })
      .pipe(autoprefixer(this.config.autoprefixer.options))
      .pipe(sourcemaps.write())
      .pipe(this.gulp.dest(this.config.dest))
      .pipe(this.browserSync.stream())
  }
}

gulp.task('styles', () => {
  return gulp.src('app/stylesheets/*.scss')
    // .pipe($.plumber())
    // .pipe($.sourcemaps.init())
    .pipe(sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', sass.logError))
    // .pipe($.autoprefixer({browsers: ['last 1 version']}))
    // .pipe($.uncss({
    //   html: ['app/*.html']
    // }))
    // .pipe($.sourcemaps.write())
    .pipe(gulp.dest('public/stylesheets'))
    .pipe(bundle());
    // .pipe(reload({stream: true}));
});

function buildStyles() {

  return gulp.src(styles.glob)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer({ browsers: ['> 1%'], cascade: false }))
    // .pipe(uncss({ html: [path.join(dist.dir, '**/*.html')] }))
    .pipe(cssnano())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.join(dist.dir, 'css/')))
}

var gulp = require('gulp');
let sync = require('browser-sync').create();
var reload = sync.reload;
var include = require('gulp-include');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var rename = require('gulp-rename');
var mqpacker = require('css-mqpacker');
var copy = require('gulp-copy');
var ghPages = require('gulp-gh-pages');
var colors = require('colors/safe');
var del = require('del');

sass.compiler = require('node-sass');

// SASS, AUTOPREFIXR, MINIMIZE
gulp.task('sass', function () {
  var processors = [
    autoprefixer({browsers: [
      'last 1 version',
      'last 2 Chrome versions',
      'last 2 Firefox versions',
      'last 2 Opera versions',
      'last 2 Edge versions'
    ]}),
    mqpacker()
  ];

  console.log('⬤  Run ' + colors.yellow('Sass') +
              ' + ' +

*/

const path = require('path');
const fs = require('fs');
const times = require('lodash/times');
const escapeRegExp = require('lodash/escapeRegExp');
const sizeOf = require('image-size');
const datauri = require('datauri').sync;

let types;

/* eslint-disable prefer-destructuring */
try {
    types = require('node-sass').types;
} catch (e) {
    types = require('gulp-sass/node_modules/node-sass').types; //eslint-disable-line import/no-unresolved
}
/* eslint-enable prefer-destructuring */
module.exports = (options) => {

    const paths = require('../../gulp-config/paths');
    const rootPath = paths.toAbsPath('src.root');
    const imgPath = paths.toAbsPath('src.assets/images');
    const baseRegExp = new RegExp('^' + escapeRegExp(rootPath + path.sep));

    const baseUrl = '/' + paths.toAbsPath('src.assets/images').replace(baseRegExp, '').replace(path.sep, '/').trim('/') + '/';


    const getFilePath = (filepath) => {
        const imagePath = path.join(imgPath, filepath.getValue());
        if (!fs.existsSync(imagePath)) {
            console.warn('File %s not found', imagePath); //eslint-disable-line no-console

gulp.task('sass', () => {
    const config = readConfig(`${CONFIG}/pleeease.json`);
    return gulp.src(`${SRC}/scss/style.scss`)
        .pipe(sassGlob())
        .pipe(sass())
        .pipe(pleeease(config))
        .pipe(postcss([
            require('postcss-assets')({
                loadPaths: [ 'img/' ],
                basePath: './public',
                // 相対位置の場合はコメントアウト
                relative: './css/',
            })
        ]))
        .pipe(gulp.dest(`${DEST}/css`));
});

/* requires */

const gulp = require('gulp');
const bs = require('browser-sync');
const del = require('del');

const sass = require('gulp-sass');
const sassCompiler = require('sass');
const Fiber = require('fibers');
sass.compiler = sassCompiler;

const pug = require('gulp-pug');
const stylelint = require('gulp-stylelint');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const discardComments = require('postcss-discard-comments');
const prefixWrap = require('postcss-prefixwrap');
const csso = require('gulp-csso');
const rename = require('gulp-rename');
const filter = require('gulp-filter');

const themes = require('./themes');

/* paths */

const input = {

const imagemin = require('gulp-imagemin');
const cssmin = require('gulp-cssmin');
const htmlreplace = require('gulp-html-replace');
const runsequence = require('run-sequence');
const fs = require('fs');
const yargs = require('yargs').argv;
const gulpif = require('gulp-if');
const gutil = require('gulp-util');
const jsonmin = require('gulp-jsonmin');
const minifyInline = require('gulp-minify-inline');
const spritesmith = require('gulp.spritesmith');
const jimp = require('gulp-jimp');
const glob = require("glob");
const sass = require('gulp-sass');
const del = require('del');
sass.compiler = require('node-sass');

//####################################
// List of Gulp tasks
//
// You can edit tasks names. For
// example: by default there's a css
// task, but you can exchange the name
// as you want. You could call it as
// styles, and you use it like:
//
//      gulp styles
//####################################

const tasks = {
  js: {
      bundler: 'js'

var gulp = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var copy = require('gulp-copy');
var ghPages = require('gulp-gh-pages');
var colors = require('colors/safe');
var del = require('del');


gulp.task('css', function() {
  return gulp.src('src/scss/**/styles.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/css'));
});

// WATCH FILES FOR CHANGES AND RELOAD
function watch () {