1

我使用 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) {}
4

1 回答 1

1

问题是“样式”任务。

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

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

  1. 在 gulp.task('styles') 中，为此更改 gulp.src：

    gulp.src('app/styles/**/*.scss')

  2. 评论 gulp 更改的过滤器：

    //gulp.pipe($.changed('.tmp/styles', {extension: '.css'}))

完毕！而已。

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

于 2015-05-04T01:02:17.893 回答