2014-06-09 17:02:39 +04:00
|
|
|
/**
|
|
|
|
*
|
2014-06-09 12:56:26 +04:00
|
|
|
* Web Starter Kit
|
2015-01-06 16:36:47 +03:00
|
|
|
* Copyright 2015 Google Inc. All rights reserved.
|
2014-06-09 17:02:39 +04:00
|
|
|
*
|
2014-06-09 12:56:26 +04:00
|
|
|
* 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
|
2014-06-09 17:02:39 +04:00
|
|
|
*
|
2014-10-22 17:14:09 +04:00
|
|
|
* https://www.apache.org/licenses/LICENSE-2.0
|
2014-06-09 17:02:39 +04:00
|
|
|
*
|
2014-06-09 12:56:26 +04:00
|
|
|
* 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
|
2014-06-09 17:02:39 +04:00
|
|
|
*
|
2014-06-09 12:56:26 +04:00
|
|
|
*/
|
2014-06-09 17:02:39 +04:00
|
|
|
|
2014-04-17 16:02:38 +04:00
|
|
|
'use strict';
|
2014-06-19 16:14:21 +04:00
|
|
|
|
|
|
|
// Include Gulp & Tools We'll Use
|
2014-04-17 16:02:38 +04:00
|
|
|
var gulp = require('gulp');
|
2014-06-07 21:38:49 +04:00
|
|
|
var $ = require('gulp-load-plugins')();
|
2014-06-22 00:32:57 +04:00
|
|
|
var del = require('del');
|
2014-06-19 05:37:49 +04:00
|
|
|
var runSequence = require('run-sequence');
|
2014-05-06 16:47:36 +04:00
|
|
|
var browserSync = require('browser-sync');
|
2014-06-06 14:59:34 +04:00
|
|
|
var pagespeed = require('psi');
|
2014-05-06 16:47:36 +04:00
|
|
|
var reload = browserSync.reload;
|
2015-01-29 18:26:23 +03:00
|
|
|
var swPrecache = require('sw-precache');
|
|
|
|
var fs = require('fs');
|
|
|
|
var path = require('path');
|
|
|
|
var packageJson = require('./package.json');
|
2014-04-17 16:02:38 +04:00
|
|
|
|
2014-06-19 16:14:21 +04:00
|
|
|
// Lint JavaScript
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('jshint', function() {
|
|
|
|
return gulp.src(['app/scripts/**/*.js', 'app/styleguide/**/*.js'])
|
2014-06-26 23:32:04 +04:00
|
|
|
.pipe(reload({stream: true, once: true}))
|
2014-06-20 19:20:44 +04:00
|
|
|
.pipe($.jshint())
|
|
|
|
.pipe($.jshint.reporter('jshint-stylish'))
|
2014-06-26 23:32:04 +04:00
|
|
|
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
|
2014-06-19 16:14:21 +04:00
|
|
|
});
|
2014-05-07 13:33:42 +04:00
|
|
|
|
2014-06-19 16:14:21 +04:00
|
|
|
// Optimize Images
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('images', function() {
|
2014-06-20 19:20:44 +04:00
|
|
|
return gulp.src('app/images/**/*')
|
|
|
|
.pipe($.cache($.imagemin({
|
|
|
|
progressive: true,
|
|
|
|
interlaced: true
|
|
|
|
})))
|
|
|
|
.pipe(gulp.dest('dist/images'))
|
|
|
|
.pipe($.size({title: 'images'}));
|
2014-06-19 16:14:21 +04:00
|
|
|
});
|
|
|
|
|
2014-06-28 06:20:04 +04:00
|
|
|
// Copy All Files At The Root Level (app)
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('copy', function() {
|
2014-08-05 23:59:38 +04:00
|
|
|
return gulp.src([
|
|
|
|
'app/*',
|
|
|
|
'!app/*.html',
|
|
|
|
'node_modules/apache-server-configs/dist/.htaccess'
|
|
|
|
], {
|
|
|
|
dot: true
|
|
|
|
}).pipe(gulp.dest('dist'))
|
2014-06-28 06:20:04 +04:00
|
|
|
.pipe($.size({title: 'copy'}));
|
|
|
|
});
|
|
|
|
|
2014-11-12 19:43:46 +03:00
|
|
|
// Copy image files from the Styleguide
|
|
|
|
gulp.task('styleguide-images', function() {
|
|
|
|
return gulp.src('app/styleguide/**/*.{svg,png,jpg}')
|
|
|
|
.pipe(gulp.dest('dist/styleguide/'))
|
|
|
|
.pipe($.size({title: 'styleguide-images'}));
|
|
|
|
});
|
|
|
|
|
2014-07-08 18:53:00 +04:00
|
|
|
// Copy Web Fonts To Dist
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('fonts', function() {
|
2014-07-08 18:53:00 +04:00
|
|
|
return gulp.src(['app/fonts/**'])
|
|
|
|
.pipe(gulp.dest('dist/fonts'))
|
|
|
|
.pipe($.size({title: 'fonts'}));
|
|
|
|
});
|
|
|
|
|
2014-07-30 03:25:19 +04:00
|
|
|
// Compile and Automatically Prefix Stylesheets
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('styles', function() {
|
2015-01-06 14:59:59 +03:00
|
|
|
|
|
|
|
var AUTOPREFIXER_BROWSERS = [
|
|
|
|
'ie >= 10',
|
|
|
|
'ie_mob >= 10',
|
|
|
|
'ff >= 30',
|
|
|
|
'chrome >= 34',
|
|
|
|
'safari >= 7',
|
|
|
|
'opera >= 23',
|
|
|
|
'ios >= 7',
|
|
|
|
'android >= 4.4',
|
|
|
|
'bb >= 10'
|
|
|
|
];
|
|
|
|
|
2014-07-30 03:25:19 +04:00
|
|
|
// For best performance, don't add Sass partials to `gulp.src`
|
|
|
|
return gulp.src([
|
2014-10-14 19:19:35 +04:00
|
|
|
'app/**/*.scss',
|
|
|
|
'app/styles/**/*.css'
|
|
|
|
])
|
2015-01-26 13:32:24 +03:00
|
|
|
.pipe($.changed('.tmp/styles', {extension: '.css'}))
|
2014-11-25 14:22:05 +03:00
|
|
|
.pipe($.sass({
|
2015-01-07 16:50:02 +03:00
|
|
|
precision: 10,
|
|
|
|
onError: console.error.bind(console, 'Sass error:')
|
|
|
|
}))
|
2014-07-04 15:35:14 +04:00
|
|
|
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
|
2014-09-03 14:47:19 +04:00
|
|
|
.pipe(gulp.dest('.tmp'))
|
2014-08-28 20:13:09 +04:00
|
|
|
// Concatenate And Minify Styles
|
|
|
|
.pipe($.if('*.css', $.csso()))
|
2014-09-03 14:47:19 +04:00
|
|
|
.pipe(gulp.dest('dist'))
|
2014-07-30 03:25:19 +04:00
|
|
|
.pipe($.size({title: 'styles'}));
|
2014-06-19 05:37:49 +04:00
|
|
|
});
|
2014-06-18 23:58:06 +04:00
|
|
|
|
2014-11-12 19:43:46 +03:00
|
|
|
// Concatenate And Minify JavaScript
|
|
|
|
gulp.task('scripts', function() {
|
2015-01-30 17:44:33 +03:00
|
|
|
var sources = [
|
|
|
|
// Scripts
|
|
|
|
'app/scripts/**/*.js',
|
|
|
|
// Component handler
|
|
|
|
'app/styleguide/wskComponentHandler.js',
|
|
|
|
// Polyfills/dependencies
|
|
|
|
'app/styleguide/third_party/**/*.js',
|
|
|
|
// Base components
|
|
|
|
'app/styleguide/animation/animation.js',
|
|
|
|
'app/styleguide/button/button.js',
|
|
|
|
'app/styleguide/checkbox/checkbox.js',
|
|
|
|
'app/styleguide/column-layout/column-layout.js',
|
|
|
|
'app/styleguide/icon-toggle/icon-toggle.js',
|
|
|
|
'app/styleguide/item/item.js',
|
|
|
|
'app/styleguide/radio/radio.js',
|
|
|
|
'app/styleguide/slider/slider.js',
|
|
|
|
'app/styleguide/spinner/spinner.js',
|
|
|
|
'app/styleguide/switch/switch.js',
|
|
|
|
'app/styleguide/tabs/tabs.js',
|
|
|
|
'app/styleguide/textfield/textfield.js',
|
|
|
|
'app/styleguide/tooltip/tooltip.js',
|
|
|
|
// Complex components (which reuse base components)
|
|
|
|
'app/styleguide/layout/layout.js',
|
|
|
|
// And finally, the ripples
|
|
|
|
'app/styleguide/ripple/ripple.js'
|
|
|
|
];
|
2015-01-20 20:54:59 +03:00
|
|
|
return gulp.src(sources)
|
2014-11-12 19:43:46 +03:00
|
|
|
.pipe($.concat('main.min.js'))
|
|
|
|
.pipe($.uglify({preserveComments: 'some'}))
|
|
|
|
// Output Files
|
|
|
|
.pipe(gulp.dest('dist/scripts'))
|
|
|
|
.pipe($.size({title: 'scripts'}));
|
|
|
|
});
|
|
|
|
|
2014-06-19 16:14:21 +04:00
|
|
|
// Scan Your HTML For Assets & Optimize Them
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('html', function() {
|
2014-08-21 14:07:30 +04:00
|
|
|
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
|
2014-08-01 13:31:51 +04:00
|
|
|
|
2014-11-12 19:43:46 +03:00
|
|
|
return gulp.src('app/**/**/*.html')
|
2014-08-01 13:31:51 +04:00
|
|
|
.pipe(assets)
|
2014-06-20 19:20:44 +04:00
|
|
|
// 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.
|
2014-12-04 16:15:55 +03:00
|
|
|
.pipe($.if('*.css', $.uncss({
|
2014-06-30 20:52:51 +04:00
|
|
|
html: [
|
|
|
|
'app/index.html',
|
2014-08-20 20:02:58 +04:00
|
|
|
'app/styleguide.html'
|
2014-06-30 20:52:51 +04:00
|
|
|
],
|
|
|
|
// CSS Selectors for UnCSS to ignore
|
2015-01-06 16:54:34 +03:00
|
|
|
ignore: []
|
2014-12-04 16:15:55 +03:00
|
|
|
})))
|
2014-11-12 19:43:46 +03:00
|
|
|
|
2014-07-07 16:07:57 +04:00
|
|
|
// Concatenate And Minify Styles
|
2014-08-28 20:13:09 +04:00
|
|
|
// In case you are still using useref build blocks
|
2014-07-07 16:07:57 +04:00
|
|
|
.pipe($.if('*.css', $.csso()))
|
2014-08-01 13:31:51 +04:00
|
|
|
.pipe(assets.restore())
|
2014-06-20 19:20:44 +04:00
|
|
|
.pipe($.useref())
|
|
|
|
// Minify Any HTML
|
2014-07-03 18:36:41 +04:00
|
|
|
.pipe($.if('*.html', $.minifyHtml()))
|
2014-06-20 19:20:44 +04:00
|
|
|
// Output Files
|
|
|
|
.pipe(gulp.dest('dist'))
|
|
|
|
.pipe($.size({title: 'html'}));
|
2014-04-17 16:02:38 +04:00
|
|
|
});
|
|
|
|
|
2014-06-19 16:14:21 +04:00
|
|
|
// Clean Output Directory
|
2014-11-14 01:49:12 +03:00
|
|
|
gulp.task('clean', del.bind(null, ['.tmp', 'dist/*', '!dist/.git'], {dot: true}));
|
2014-04-17 16:02:38 +04:00
|
|
|
|
2014-06-19 16:14:21 +04:00
|
|
|
// Watch Files For Changes & Reload
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('serve', ['styles'], function() {
|
2014-06-26 11:10:04 +04:00
|
|
|
browserSync({
|
2014-06-26 02:14:19 +04:00
|
|
|
notify: false,
|
2014-09-22 14:34:01 +04:00
|
|
|
// Customize the BrowserSync console logging prefix
|
2014-09-22 14:52:32 +04:00
|
|
|
logPrefix: 'WSK',
|
2014-07-23 00:20:39 +04:00
|
|
|
// 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,
|
2014-09-02 00:25:57 +04:00
|
|
|
server: ['.tmp', 'app']
|
2014-06-20 19:20:44 +04:00
|
|
|
});
|
2014-04-17 16:02:38 +04:00
|
|
|
|
2014-09-26 12:35:37 +04:00
|
|
|
gulp.watch(['app/**/**/**/*.html'], reload);
|
|
|
|
gulp.watch(['app/**/**/**/*.{scss,css}'], ['styles', reload]);
|
2014-12-10 17:23:40 +03:00
|
|
|
gulp.watch(['app/scripts/**/*.js','app/styleguide/**/*.js'], ['jshint']);
|
2014-06-25 19:07:34 +04:00
|
|
|
gulp.watch(['app/images/**/*'], reload);
|
2014-04-17 16:02:38 +04:00
|
|
|
});
|
2014-06-07 21:38:49 +04:00
|
|
|
|
2014-07-01 00:18:52 +04:00
|
|
|
// Build and serve the output from the dist build
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('serve:dist', ['default'], function() {
|
2014-07-01 00:23:24 +04:00
|
|
|
browserSync({
|
|
|
|
notify: false,
|
2014-09-22 14:52:32 +04:00
|
|
|
logPrefix: 'WSK',
|
2014-07-23 00:20:39 +04:00
|
|
|
// 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,
|
2014-11-21 15:21:08 +03:00
|
|
|
server: 'dist',
|
|
|
|
baseDir: "dist"
|
2014-07-01 00:18:52 +04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2014-06-20 03:36:01 +04:00
|
|
|
// Build Production Files, the Default Task
|
2014-10-14 19:19:35 +04:00
|
|
|
gulp.task('default', ['clean'], function(cb) {
|
2015-01-29 18:26:23 +03:00
|
|
|
runSequence(
|
|
|
|
'styles',
|
|
|
|
['jshint', 'html', 'scripts', 'images', 'styleguide-images', 'fonts', 'copy'],
|
|
|
|
'generate-service-worker',
|
|
|
|
cb);
|
2014-06-07 21:38:49 +04:00
|
|
|
});
|
2014-06-19 16:14:21 +04:00
|
|
|
|
2014-06-19 18:42:10 +04:00
|
|
|
// Run PageSpeed Insights
|
2015-01-26 13:30:50 +03:00
|
|
|
gulp.task('pagespeed', function (cb) {
|
|
|
|
// Update the below URL to the public URL of your site
|
|
|
|
pagespeed.output('example.com', {
|
|
|
|
strategy: 'mobile'
|
|
|
|
// By default we use the PageSpeed Insights free (no API key) tier.
|
|
|
|
// Use a Google Developer API key if you have one: http://goo.gl/RkN0vE
|
|
|
|
// key: 'YOUR_API_KEY'
|
|
|
|
}, cb);
|
|
|
|
});
|
2014-06-27 22:28:08 +04:00
|
|
|
|
2015-01-29 18:26:23 +03:00
|
|
|
// See http://www.html5rocks.com/en/tutorials/service-worker/introduction/ for
|
|
|
|
// an in-depth explanation of what service workers are and why you should care.
|
|
|
|
// Generate a service worker file that will provide offline functionality for
|
|
|
|
// local resources. This should only be done for the 'dist' directory, to allow
|
|
|
|
// live reload to work as expected when serving from the 'app' directory.
|
|
|
|
gulp.task('generate-service-worker', function(callback) {
|
|
|
|
var rootDir = 'dist';
|
|
|
|
|
|
|
|
swPrecache({
|
|
|
|
// Used to avoid cache conflicts when serving on localhost.
|
|
|
|
cacheId: packageJson.name || 'web-starter-kit',
|
|
|
|
// URLs that don't directly map to single static files can be defined here.
|
|
|
|
// If any of the files a URL depends on changes, then the URL's cache entry
|
|
|
|
// is invalidated and it will be refetched.
|
|
|
|
// Generally, URLs that depend on multiple files (such as layout templates)
|
|
|
|
// should list all the files; a change in any will invalidate the cache.
|
|
|
|
// In this case, './' is the top-level relative URL, and its response
|
|
|
|
// depends on the contents of the file 'dist/index.html'.
|
|
|
|
dynamicUrlToDependencies: {
|
|
|
|
'./': [path.join(rootDir, 'index.html')]
|
|
|
|
},
|
|
|
|
staticFileGlobs: [
|
|
|
|
// Add/remove glob patterns to match your directory setup.
|
|
|
|
rootDir + '/fonts/**/*.woff',
|
|
|
|
rootDir + '/images/**/*',
|
|
|
|
rootDir + '/scripts/**/*.js',
|
|
|
|
rootDir + '/styles/**/*.css',
|
|
|
|
rootDir + '/*.{html,json}'
|
|
|
|
],
|
|
|
|
// Translates a static file path to the relative URL that it's served from.
|
|
|
|
stripPrefix: path.join(rootDir, path.sep)
|
|
|
|
}, function(error, serviceWorkerFileContents) {
|
|
|
|
if (error) {
|
|
|
|
return callback(error);
|
|
|
|
}
|
|
|
|
fs.writeFile(path.join(rootDir, 'service-worker.js'),
|
|
|
|
serviceWorkerFileContents, function(error) {
|
|
|
|
if (error) {
|
|
|
|
return callback(error);
|
|
|
|
}
|
|
|
|
callback();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2014-06-27 22:43:40 +04:00
|
|
|
// Load custom tasks from the `tasks` directory
|
2014-11-12 19:43:46 +03:00
|
|
|
// try { require('require-dir')('tasks'); } catch (err) { console.error(err); }
|