From my testing, the browserSync server prefers files in app over files in .tmp when they have the same name. .tmp files should be preferred, since any file in .tmp has been processed in some way (e.g., a main.css file that's autoprefixed into .tmp, or an index.html that contains some templating that's precompiled into .tmp).
148 lines
4.6 KiB
JavaScript
148 lines
4.6 KiB
JavaScript
/**
|
|
*
|
|
* Web Starter Kit
|
|
* Copyright 2014 Google Inc. All rights reserved.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License
|
|
*
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
// 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 bs; // reference to the running instance of browserSync
|
|
|
|
// Lint JavaScript
|
|
gulp.task('jshint', function () {
|
|
return gulp.src('app/scripts/**/*.js')
|
|
.pipe($.jshint())
|
|
.pipe($.jshint.reporter('jshint-stylish'))
|
|
.pipe($.if(!bs.active, $.jshint.reporter('fail')))
|
|
.pipe(reload({stream: true}));
|
|
});
|
|
|
|
// Optimize Images
|
|
gulp.task('images', function () {
|
|
return gulp.src('app/images/**/*')
|
|
.pipe($.cache($.imagemin({
|
|
progressive: true,
|
|
interlaced: true
|
|
})))
|
|
.pipe(gulp.dest('dist/images'))
|
|
.pipe(reload({stream: true, once: true}))
|
|
.pipe($.size({title: 'images'}));
|
|
});
|
|
|
|
// Automatically Prefix CSS
|
|
gulp.task('styles:css', function () {
|
|
return gulp.src('app/styles/**/*.css')
|
|
.pipe($.autoprefixer('last 1 version'))
|
|
.pipe(gulp.dest('app/styles'))
|
|
.pipe(reload({stream: true}))
|
|
.pipe($.size({title: 'styles:css'}));
|
|
});
|
|
|
|
// Compile Sass For Style Guide Components (app/styles/components)
|
|
gulp.task('styles:components', function () {
|
|
return gulp.src('app/styles/components/components.scss')
|
|
.pipe($.rubySass({
|
|
style: 'expanded',
|
|
precision: 10,
|
|
loadPath: ['app/styles/components']
|
|
}))
|
|
.pipe($.autoprefixer('last 1 version'))
|
|
.pipe(gulp.dest('app/styles/components'))
|
|
.pipe($.size({title: 'styles:components'}));
|
|
});
|
|
|
|
// Compile Any Other Sass Files You Added (app/styles)
|
|
gulp.task('styles:scss', function () {
|
|
return gulp.src(['app/styles/**/*.scss', '!app/styles/components/components.scss'])
|
|
.pipe($.rubySass({
|
|
style: 'expanded',
|
|
precision: 10,
|
|
loadPath: ['app/styles']
|
|
}))
|
|
.pipe($.autoprefixer('last 1 version'))
|
|
.pipe(gulp.dest('.tmp/styles'))
|
|
.pipe($.size({title: 'styles:scss'}));
|
|
});
|
|
|
|
// Output Final CSS Styles
|
|
gulp.task('styles', ['styles:components', 'styles:scss', 'styles:css']);
|
|
|
|
// Scan Your HTML For Assets & Optimize Them
|
|
gulp.task('html', function () {
|
|
return gulp.src('app/**/*.html')
|
|
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
|
|
// Concatenate And Minify JavaScript
|
|
.pipe($.if('*.js', $.uglify()))
|
|
// Concatenate And Minify Styles
|
|
.pipe($.if('*.css', $.csso()))
|
|
// 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'] })))
|
|
.pipe($.useref.restore())
|
|
.pipe($.useref())
|
|
// Update Production Style Guide Paths
|
|
.pipe($.replace('components/components.css', 'components/main.min.css'))
|
|
// Minify Any HTML
|
|
.pipe($.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', function () {
|
|
bs = browserSync({
|
|
notify: false,
|
|
server: {
|
|
baseDir: ['.tmp', 'app']
|
|
}
|
|
});
|
|
|
|
gulp.watch(['app/**/*.html'], reload);
|
|
gulp.watch(['app/styles/**/*.{css,scss}'], ['styles']);
|
|
gulp.watch(['.tmp/styles/**/*.css'], reload);
|
|
gulp.watch(['app/scripts/**/*.js'], ['jshint']);
|
|
gulp.watch(['app/images/**/*'], ['images']);
|
|
});
|
|
|
|
// Build Production Files, the Default Task
|
|
gulp.task('default', ['clean'], function (cb) {
|
|
runSequence('styles', ['jshint', 'html', 'images'], 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'
|
|
}));
|