Question

我使用Google的Web Starter Kit开始了一个新的网站主题。以前，我和Grunt合作过。由于这个套件配有Gulp，我决定尝试一下。

我遇到的问题是livereload和导入的scss文件。该工具包包含一个包含components.scss文件和几个导入部分的设置（例如@import "_pages/_styleguide";这导入部分就好了，但是除非我重新启动gulp任务，否则不会刷新对_pages / _styleguide.scss的任何更改;但是，对未导入的scss文件（但改为包含在gulp任务中）的任何更改都将通过livereload重新编译和刷新。

gulp文件如下：

// Include Gulp & 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 >= 10',

  'ie_mob >= 10',

  'ff >= 30',

  'chrome >= 34',

  'safari >= 7',

  'opera >= 23',

  'ios >= 7',

  'android >= 4.4',

  'bb >= 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 & 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 & 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) {}

Answer 1

问题是'风格'任务。

出于性能原因，gulp.src和gulp-changed忽略了partials视图中的更改。（参见任务第一行中的评论）

要解决此问题，请按照说明操作：

在gulp.task（'styles'）中，为此更改gulp.src：

gulp.src（ '应用程序/风格/ ** / *。SCSS'）
评论gulp-changed过滤器：

// gulp.pipe（$。changed（'。tmp / styles'，{extension：'。css'}））

完成！而已。

'styles'任务不会那么快，但不再费心停止gulp或强制更改main.scss中的css进行更改。

制作Google的Web入门套件Gulpfile Livereload SCSS Imports

1 个答案: