title: Make Google's Web Starter Kit Gulpfile Livereload SCSS Imports
body: <p>I started a new website theme using Google's Web Starter Kit. Previously, I worked with Grunt. Since this kit comes with Gulp, I decided to give it a try.</p>
  
  <p>The issue I'm having is with livereload and imported scss files. The kit includes a setup with a components.scss file and several imported partials (e.g. <code>@import "_pages/_styleguide";</code> This imports the partial just fine, but any changes to _pages/_styleguide.scss are not refresh unless I restart the gulp task; however, any change to an scss file that is not imported (but instead included in the gulp task) is recompiled and refreshed with livereload.</p>
  
  <p>The gulp file is as follows:</p>
  
  <pre><code>// Include Gulp &amp; Tools We'll Use
  
  var gulp = require('gulp');
  
  var $ = require('gulp-load-plugins')();
  
  var del = require('del');
  
  var runSequence = require('run-sequence');
  
  var browserSync = require('browser-sync');
  
  var pagespeed = require('psi');
  
  var reload = browserSync.reload;
  
  
  
  var AUTOPREFIXER_BROWSERS = [
  
    'ie &gt;= 10',
  
    'ie_mob &gt;= 10',
  
    'ff &gt;= 30',
  
    'chrome &gt;= 34',
  
    'safari &gt;= 7',
  
    'opera &gt;= 23',
  
    'ios &gt;= 7',
  
    'android &gt;= 4.4',
  
    'bb &gt;= 10'
  
  ];
  
  
  
  // Lint JavaScript
  
  gulp.task('jshint', function () {
  
    return gulp.src('app/scripts/**/*.js')
  
      .pipe(reload({stream: true, once: true}))
  
      .pipe($.jshint())
  
      .pipe($.jshint.reporter('jshint-stylish'))
  
      .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
  
  });
  
  
  
  // Optimize Images
  
  gulp.task('images', function () {
  
    return gulp.src('app/images/**/*')
  
      .pipe($.cache($.imagemin({
  
        progressive: true,
  
        interlaced: true
  
      })))
  
      .pipe(gulp.dest('dist/images'))
  
      .pipe($.size({title: 'images'}));
  
  });
  
  
  
  // Copy All Files At The Root Level (app)
  
  gulp.task('copy', function () {
  
    return gulp.src([
  
      'app/*',
  
      '!app/*.html',
  
      'node_modules/apache-server-configs/dist/.htaccess'
  
    ], {
  
      dot: true
  
    }).pipe(gulp.dest('dist'))
  
      .pipe($.size({title: 'copy'}));
  
  });
  
  
  
  // Copy Web Fonts To Dist
  
  gulp.task('fonts', function () {
  
    return gulp.src(['app/fonts/**'])
  
      .pipe(gulp.dest('dist/fonts'))
  
      .pipe($.size({title: 'fonts'}));
  
  });
  
  
  
  // Compile and Automatically Prefix Stylesheets
  
  gulp.task('styles', function () {
  
    // For best performance, don't add Sass partials to `gulp.src`
  
    return gulp.src([
  
        'app/styles/*.scss',
  
        'app/styles/**/*.css',
  
        'app/styles/components/components.scss'
  
      ])
  
      .pipe($.changed('.tmp/styles', {extension: '.css'}))
  
      .pipe($.if('*.scss', $.rubySass({
  
        style: 'expanded',
  
        precision: 10
  
      })
  
      .on('error', console.error.bind(console))
  
      ))
  
      .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
  
      .pipe(gulp.dest('.tmp/styles'))
  
      .pipe($.size({title: 'styles'}));
  
  });
  
  
  
  // Scan Your HTML For Assets &amp; Optimize Them
  
  gulp.task('html', function () {
  
    var assets = $.useref.assets({searchPath: '{.tmp,app}'});
  
  
  
    return gulp.src('app/**/*.html')
  
      .pipe(assets)
  
      // Concatenate And Minify JavaScript
  
      .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
  
      // Remove Any Unused CSS
  
      // Note: If not using the Style Guide, you can delete it from
  
      // the next line to only include styles your project uses.
  
      .pipe($.if('*.css', $.uncss({
  
        html: [
  
          'app/index.html',
  
          'app/styleguide/index.html'
  
        ],
  
        // CSS Selectors for UnCSS to ignore
  
        ignore: [
  
          /.navdrawer-container.open/,
  
          /.app-bar.open/
  
        ]
  
      })))
  
      // Concatenate And Minify Styles
  
      .pipe($.if('*.css', $.csso()))
  
      .pipe(assets.restore())
  
      .pipe($.useref())
  
      // Update Production Style Guide Paths
  
      .pipe($.replace('components/components.css', 'components/main.min.css'))
  
      // Minify Any HTML
  
      .pipe($.if('*.html', $.minifyHtml()))
  
      // Output Files
  
      .pipe(gulp.dest('dist'))
  
      .pipe($.size({title: 'html'}));
  
  });
  
  
  
  // Clean Output Directory
  
  gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
  
  
  
  // Watch Files For Changes &amp; Reload
  
  gulp.task('serve', ['styles'], function () {
  
    browserSync({
  
      notify: false,
  
      // Run as an https by uncommenting 'https: true'
  
      // Note: this uses an unsigned certificate which on first access
  
      //       will present a certificate warning in the browser.
  
      // https: true,
  
      server: {
  
        baseDir: ['.tmp', 'app']
  
      }
  
    });
  
  
  
    gulp.watch(['app/**/*.html'], reload);
  
    gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
  
    gulp.watch(['app/scripts/**/*.js'], ['jshint']);
  
    gulp.watch(['app/images/**/*'], reload);
  
  });
  
  
  
  // Build and serve the output from the dist build
  
  gulp.task('serve:dist', ['default'], function () {
  
    browserSync({
  
      notify: false,
  
      // Run as an https by uncommenting 'https: true'
  
      // Note: this uses an unsigned certificate which on first access
  
      //       will present a certificate warning in the browser.
  
      // https: true,
  
      server: {
  
        baseDir: 'dist'
  
      }
  
  
  
    });
  
  });
  
  
  
  // Build Production Files, the Default Task
  
  gulp.task('default', ['clean'], function (cb) {
  
    runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy'], cb);
  
  });
  
  
  
  // Run PageSpeed Insights
  
  // Update `url` below to the public URL for your site
  
  gulp.task('pagespeed', pagespeed.bind(null, {
  
    // By default, we use the PageSpeed Insights
  
    // free (no API key) tier. You can use a Google
  
    // Developer API key if you have one. See
  
    // http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
  
    url: 'https://example.com',
  
    strategy: 'mobile'
  
  }));
  
  
  
  // Load custom tasks from the `tasks` directory
  
  try { require('require-dir')('tasks'); } catch (err) {}
  </code></pre>