/** * * Material Design Lite * Copyright 2015 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 * * https://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 * */ // jscs:disable jsDoc 'use strict'; // Include Gulp & Tools We'll Use import fs from 'fs'; import path from 'path'; import mergeStream from 'merge-stream'; import del from 'del'; import vinylPaths from'vinyl-paths'; import runSequence from 'run-sequence'; import browserSync from 'browser-sync'; import through from 'through2'; import swig from 'swig'; import gulp from 'gulp'; import closureCompiler from 'gulp-closure-compiler'; import gulpLoadPlugins from 'gulp-load-plugins'; import uniffe from './utils/uniffe.js'; import pkg from './package.json'; const $ = gulpLoadPlugins(); const reload = browserSync.reload; const hostedLibsUrlPrefix = 'https://code.getmdl.io'; const templateArchivePrefix = 'mdl-template-'; const bucketProd = 'gs://www.getmdl.io'; const bucketStaging = 'gs://mdl-staging'; const bucketCode = 'gs://code.getmdl.io'; const banner = ['/**', ' * <%= pkg.name %> - <%= pkg.description %>', ' * @version v<%= pkg.version %>', ' * @license <%= pkg.license %>', ' * @copyright 2015 Google, Inc.', ' * @link https://github.com/google/material-design-lite', ' */', ''].join('\n'); let codeFiles = ''; const AUTOPREFIXER_BROWSERS = [ 'ie >= 10', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'safari >= 7', 'opera >= 23', 'ios >= 7', 'android >= 4.4', 'bb >= 10' ]; const SOURCES = [ // Component handler 'src/mdlComponentHandler.js', // Polyfills/dependencies 'src/third_party/**/*.js', // Base components 'src/button/button.js', 'src/checkbox/checkbox.js', 'src/icon-toggle/icon-toggle.js', 'src/menu/menu.js', 'src/progress/progress.js', 'src/radio/radio.js', 'src/slider/slider.js', 'src/snackbar/snackbar.js', 'src/spinner/spinner.js', 'src/switch/switch.js', 'src/tabs/tabs.js', 'src/textfield/textfield.js', 'src/tooltip/tooltip.js', // Complex components (which reuse base components) 'src/layout/layout.js', 'src/data-table/data-table.js', // And finally, the ripples 'src/ripple/ripple.js' ]; // ***** Development tasks ****** // // Lint JavaScript gulp.task('lint', () => { return gulp.src([ 'src/**/*.js', 'gulpfile.babel.js' ]) .pipe(reload({stream: true, once: true})) .pipe($.jshint()) .pipe($.jscs()) .pipe($.jshint.reporter('jshint-stylish')) .pipe($.jscs.reporter()) .pipe($.if(!browserSync.active, $.jshint.reporter('fail'))) .pipe($.if(!browserSync.active, $.jscs.reporter('fail'))); }); // ***** Production build tasks ****** // // Optimize Images // TODO: Update image paths in final CSS to match root/images gulp.task('images', () => { return gulp.src('src/**/*.{svg,png,jpg}') .pipe($.flatten()) .pipe($.cache($.imagemin({ progressive: true, interlaced: true }))) .pipe(gulp.dest('dist/images')) .pipe($.size({title: 'images'})); }); // Compile and Automatically Prefix Stylesheets (dev) gulp.task('styles:dev', () => { return gulp.src('src/**/*.scss') .pipe($.sass({ precision: 10, onError: console.error.bind(console, 'Sass error:') })) .pipe($.cssInlineImages({ webRoot: 'src' })) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe(gulp.dest('.tmp/styles')) .pipe($.size({title: 'styles'})); }); // Compile and Automatically Prefix Stylesheet Templates (production) gulp.task('styletemplates', () => { // For best performance, don't add Sass partials to `gulp.src` return gulp.src('src/template.scss') // Generate Source Maps .pipe($.sourcemaps.init()) .pipe($.sass({ precision: 10, onError: console.error.bind(console, 'Sass error:') })) .pipe($.cssInlineImages({webRoot: 'src'})) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe(gulp.dest('.tmp')) // Concatenate Styles .pipe($.concat('material.css.template')) .pipe(gulp.dest('dist')) // Minify Styles .pipe($.if('*.css.template', $.csso())) .pipe($.concat('material.min.css.template')) .pipe($.header(banner, {pkg})) .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('dist')) .pipe($.size({title: 'styles'})); }); // Compile and Automatically Prefix Stylesheets (production) gulp.task('styles', () => { // For best performance, don't add Sass partials to `gulp.src` return gulp.src('src/material-design-lite.scss') // Generate Source Maps .pipe($.sourcemaps.init()) .pipe($.sass({ precision: 10, onError: console.error.bind(console, 'Sass error:') })) .pipe($.cssInlineImages({webRoot: 'src'})) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe(gulp.dest('.tmp')) // Concatenate Styles .pipe($.concat('material.css')) .pipe($.header(banner, {pkg})) .pipe(gulp.dest('dist')) // Minify Styles .pipe($.if('*.css', $.csso())) .pipe($.concat('material.min.css')) .pipe($.header(banner, {pkg})) .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('dist')) .pipe($.size({title: 'styles'})); }); // Only generate CSS styles for the MDL grid gulp.task('styles-grid', () => { return gulp.src('src/material-design-lite-grid.scss') .pipe($.sass({ precision: 10, onError: console.error.bind(console, 'Sass error:') })) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe(gulp.dest('.tmp')) // Concatenate Styles .pipe($.concat('material-grid.css')) .pipe($.header(banner, {pkg})) .pipe(gulp.dest('dist')) // Minify Styles .pipe($.if('*.css', $.csso())) .pipe($.concat('material-grid.min.css')) .pipe($.header(banner, {pkg})) .pipe(gulp.dest('dist')) .pipe($.size({title: 'styles-grid'})); }); // Build with Google's Closure Compiler, requires Java 1.7+ installed. gulp.task('closure', () => { return gulp.src(SOURCES) .pipe(closureCompiler({ compilerPath: 'node_modules/google-closure-compiler/compiler.jar', fileName: 'material.closure.min.js', compilerFlags: { // jscs:disable closureCamelCase compilation_level: 'ADVANCED_OPTIMIZATIONS', language_in: 'ECMASCRIPT6_STRICT', language_out: 'ECMASCRIPT5_STRICT', warning_level: 'VERBOSE' // jscs:enable closureCamelCase } })) .pipe(gulp.dest('./dist')); }); // Concatenate And Minify JavaScript gulp.task('scripts', ['lint'], () => { return gulp.src(SOURCES) .pipe($.if(/mdlComponentHandler\.js/, $.util.noop(), uniffe())) .pipe($.sourcemaps.init()) // Concatenate Scripts .pipe($.concat('material.js')) .pipe($.iife({useStrict: true})) .pipe(gulp.dest('dist')) // Minify Scripts .pipe($.uglify({ sourceRoot: '.', sourceMapIncludeSources: true })) .pipe($.header(banner, {pkg})) .pipe($.concat('material.min.js')) // Write Source Maps .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('dist')) .pipe($.size({title: 'scripts'})); }); // Clean Output Directory gulp.task('clean', () => del(['dist', '.publish'])); // Copy package manger and LICENSE files to dist gulp.task('metadata', () => { return gulp.src([ 'package.json', 'bower.json', 'LICENSE' ]) .pipe(gulp.dest('dist')); }); // Build Production Files, the Default Task gulp.task('default', ['clean'], cb => { runSequence( ['styles', 'styles-grid'], ['scripts'], ['mocha'], cb); }); // Build production files and microsite gulp.task('all', ['clean'], cb => { runSequence( ['styletemplates'], ['styles-grid', 'styles:gen'], ['scripts'], ['mocha'], ['assets', 'pages', 'templates', 'images', 'metadata'], ['zip'], cb); }); // ***** Testing tasks ***** // gulp.task('mocha', ['styles'], () => { return gulp.src('test/index.html') .pipe($.mochaPhantomjs({reporter: 'tap'})); }); gulp.task('mocha:closure', ['closure'], () => { return gulp.src('test/index.html') .pipe($.replace('src="../dist/material.js"', 'src="../dist/material.closure.min.js"')) .pipe($.rename('temp.html')) .pipe(gulp.dest('test')) .pipe($.mochaPhantomjs({reporter: 'tap'})) .on('finish', () => del.sync('test/temp.html')) .on('error', () => del.sync('test/temp.html')); }); gulp.task('test', [ 'lint', 'mocha', 'mocha:closure' ]); gulp.task('test:visual', () => { browserSync({ notify: false, server: '.', startPath: 'test/visual/index.html' }); gulp.watch('test/visual/**', reload); }); // ***** Landing page tasks ***** // /** * Site metadata for use with templates. * @type {Object} */ const site = {}; /** * Generates an HTML file based on a template and file metadata. */ function applyTemplate() { return through.obj((file, enc, cb) => { const data = { site, page: file.page, content: file.contents.toString() }; const templateFile = path.join( __dirname, 'docs', '_templates', `${file.page.layout}.html`); const tpl = swig.compileFile(templateFile, {cache: false}); file.contents = new Buffer(tpl(data)); cb(null, file); }); } /** * Generates an index.html file for each README in MDL/src directory. */ gulp.task('components', ['demos'], () => { return gulp.src('src/**/README.md', {base: 'src'}) // Add basic front matter. .pipe($.header('---\nlayout: component\nbodyclass: component\ninclude_prefix: ../../\n---\n\n')) .pipe($.frontMatter({ property: 'page', remove: true })) .pipe($.marked()) .pipe((() => { return through.obj((file, enc, cb) => { file.page.component = file.relative.split('/')[0]; cb(null, file); }); })()) .pipe(applyTemplate()) .pipe($.rename(path => path.basename = 'index')) .pipe(gulp.dest('dist/components')); }); /** * Copies demo files from MDL/src directory. */ gulp.task('demoresources', () => { return gulp.src([ 'src/**/demos.css', 'src/**/demo.css', 'src/**/demo.js' ], {base: 'src'}) .pipe($.if('*.scss', $.sass({ precision: 10, onError: console.error.bind(console, 'Sass error:') }))) .pipe($.cssInlineImages({webRoot: 'src'})) .pipe($.if('*.css', $.autoprefixer(AUTOPREFIXER_BROWSERS))) .pipe(gulp.dest('dist/components')); }); /** * Generates demo files for testing made of all the snippets and the demo file * put together. */ gulp.task('demos', ['demoresources'], () => { /** * Retrieves the list of component folders. */ function getComponentFolders() { return fs.readdirSync('src') .filter(file => fs.statSync(path.join('src', file)).isDirectory()); } const tasks = getComponentFolders().map(component => { return gulp.src([ path.join('src', component, 'snippets', '*.html'), path.join('src', component, 'demo.html') ]) .pipe($.concat('/demo.html')) // Add basic front matter. .pipe($.header('---\nlayout: demo\nbodyclass: demo\ninclude_prefix: ../../\n---\n\n')) .pipe($.frontMatter({ property: 'page', remove: true })) .pipe($.marked()) .pipe((() => { return through.obj((file, enc, cb) => { file.page.component = component; cb(null, file); }); })()) .pipe(applyTemplate()) .pipe(gulp.dest(path.join('dist', 'components', component))); }); return mergeStream(tasks); }); /** * Generates an HTML file for each md file in _pages directory. */ gulp.task('pages', ['components'], () => { return gulp.src('docs/_pages/*.md') .pipe($.frontMatter({ property: 'page', remove: true })) .pipe($.marked()) .pipe(applyTemplate()) .pipe($.replace('$$version$$', pkg.version)) .pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix)) .pipe($.replace('$$template_archive_prefix$$', templateArchivePrefix)) /* Replacing code blocks class name to match Prism's. */ .pipe($.replace('class="lang-', 'class="language-')) /* Translate html code blocks to "markup" because that's what Prism uses. */ .pipe($.replace('class="language-html', 'class="language-markup')) .pipe($.rename(path => { if (path.basename !== 'index') { path.dirname = path.basename; path.basename = 'index'; } })) .pipe(gulp.dest('dist')); }); /** * Copies assets from MDL and _assets directory. */ gulp.task('assets', () => { return gulp.src([ 'docs/_assets/**/*', 'node_modules/clippy/build/clippy.swf', 'node_modules/swfobject-npm/swfobject/src/swfobject.js', 'node_modules/prismjs/prism.js', 'node_modules/prismjs/components/prism-markup.min.js', 'node_modules/prismjs/components/prism-javascript.min.js', 'node_modules/prismjs/components/prism-css.min.js', 'node_modules/prismjs/components/prism-bash.min.js', 'node_modules/prismjs/dist/prism-default/prism-default.css' ]) .pipe($.if(/\.js/i, $.replace('$$version$$', pkg.version))) .pipe($.if(/\.js/i, $.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))) .pipe($.if(/\.(svg|jpg|png)$/i, $.imagemin({ progressive: true, interlaced: true }))) .pipe($.if(/\.css/i, $.autoprefixer(AUTOPREFIXER_BROWSERS))) .pipe($.if(/\.css/i, $.csso())) .pipe($.if(/\.js/i, $.uglify({ preserveComments: 'some', sourceRoot: '.', sourceMapIncludeSources: true }))) .pipe(gulp.dest('dist/assets')); }); /** * Defines the list of resources to watch for changes. */ function watch() { gulp.watch(['src/**/*.js', '!src/**/README.md'], ['scripts', 'demos', 'components', reload]); gulp.watch(['src/**/*.{scss,css}'], ['styles', 'styles-grid', 'styletemplates', reload]); gulp.watch(['src/**/*.html'], ['pages', reload]); gulp.watch(['src/**/*.{svg,png,jpg}'], ['images', reload]); gulp.watch(['src/**/README.md'], ['pages', reload]); gulp.watch(['templates/**/*'], ['templates', reload]); gulp.watch(['docs/**/*'], ['pages', 'assets', reload]); gulp.watch(['package.json', 'bower.json', 'LICENSE'], ['metadata']); } /** * Serves the landing page from "out" directory. */ gulp.task('serve:browsersync', () => { browserSync({ notify: false, server: { baseDir: ['dist'] } }); watch(); }); gulp.task('serve', () => { $.connect.server({ root: 'dist', port: 5000, livereload: true }); watch(); gulp.src('dist/index.html') .pipe($.open({uri: 'http://localhost:5000'})); }); // Generate release archive containing just JS, CSS, Source Map deps gulp.task('zip:mdl', () => { return gulp.src([ 'dist/material?(.min)@(.js|.css)?(.map)', 'LICENSE', 'bower.json', 'package.json' ]) .pipe($.zip('mdl.zip')) .pipe(gulp.dest('dist')); }); /** * Returns the list of children directories inside the given directory. * @param {string} dir the parent directory * @return {Array} list of child directories */ function getSubDirectories(dir) { return fs.readdirSync(dir) .filter(file => fs.statSync(path.join(dir, file)).isDirectory()); } // Generate release archives containing the templates and assets for templates. gulp.task('zip:templates', () => { const templates = getSubDirectories('dist/templates'); // Generate a zip file for each template. const generateZips = templates.map(template => { return gulp.src([ `dist/templates/${template}/**/*.*`, 'LICENSE' ]) .pipe($.rename(path => { path.dirname = path.dirname.replace(`dist/templates/${template}`, ''); })) .pipe($.zip(`${templateArchivePrefix}${template}.zip`)) .pipe(gulp.dest('dist')); }); return mergeStream(generateZips); }); gulp.task('zip', [ 'zip:templates', 'zip:mdl' ]); gulp.task('genCodeFiles', () => { return gulp.src([ 'dist/material.*@(js|css)?(.map)', 'dist/mdl.zip', `dist/${templateArchivePrefix}*.zip` ], {read: false}) .pipe($.tap(file => { codeFiles += ` dist/${path.basename(file.path)}`; })); }); // Push the latest version of code resources (CSS+JS) to Google Cloud Storage. // Public-read objects in GCS are served by a Google provided and supported // global, high performance caching/content delivery network (CDN) service. // This task requires gsutil to be installed and configured. // For info on gsutil: https://cloud.google.com/storage/docs/gsutil. gulp.task('pushCodeFiles', () => { const dest = bucketCode; console.log(`Publishing ${pkg.version} to CDN (${dest})`); // Build cache control and gsutil cmd to copy // each object into a GCS bucket. The dest is a version specific path. // The gsutil -m option requests parallel copies. // The gsutil -h option is used to set metadata headers // (cache control, in this case). // Code files should NEVER be touched after uploading, therefore // 30 days caching is a safe value. const cacheControl = '-h "Cache-Control:public,max-age=2592000"'; const gsutilCpCmd = 'gsutil -m cp -z js,css,map '; const gsutilCacheCmd = `gsutil -m setmeta -R ${cacheControl}`; // Upload the goodies to a separate GCS bucket with versioning. // Using a sep bucket avoids the risk of accidentally blowing away // old versions in the microsite bucket. return gulp.src('') .pipe($.shell([ `${gsutilCpCmd}${codeFiles} ${dest}/${pkg.version}`, `${gsutilCacheCmd} ${dest}/${pkg.version}` ])); }); gulp.task('publish:code', cb => { runSequence( ['zip:mdl', 'zip:templates'], 'genCodeFiles', 'pushCodeFiles', cb); }); /** * Function to publish staging or prod version from local tree, * or to promote staging to prod, per passed arg. * @param {string} pubScope the scope to publish to. */ function mdlPublish(pubScope) { let cacheTtl = null; let src = null; let dest = null; if (pubScope === 'staging') { // Set staging specific vars here. cacheTtl = 0; src = 'dist/*'; dest = bucketStaging; } else if (pubScope === 'prod') { // Set prod specific vars here. cacheTtl = 60; src = 'dist/*'; dest = bucketProd; } else if (pubScope === 'promote') { // Set promote (essentially prod) specific vars here. cacheTtl = 60; src = `${bucketStaging}/*`; dest = bucketProd; } let infoMsg = `Publishing ${pubScope}/${pkg.version} to GCS (${dest})`; if (src) { infoMsg += ` from ${src}`; } console.log(infoMsg); // Build gsutil commands: // The gsutil -h option is used to set metadata headers. // The gsutil -m option requests parallel copies. // The gsutil -R option is used for recursive file copy. const cacheControl = `-h "Cache-Control:public,max-age=${cacheTtl}"`; const gsutilCacheCmd = `gsutil -m setmeta ${cacheControl} ${dest}/**`; const gsutilCpCmd = `gsutil -m cp -r -z html,css,js,svg ${src} ${dest}`; gulp.src('').pipe($.shell([gsutilCpCmd, gsutilCacheCmd])); } // Push the local build of the MDL microsite and release artifacts to the // production Google Cloud Storage bucket for general serving to the web. // Public-read objects in GCS are served by a Google provided and supported // global, high performance caching/content delivery network (CDN) service. // This task requires gsutil to be installed and configured. // For info on gsutil: https://cloud.google.com/storage/docs/gsutil. // gulp.task('publish:prod', () => { mdlPublish('prod'); }); // Promote the staging version of the MDL microsite and release artifacts // to the production Google Cloud Storage bucket for general serving. // Public-read objects in GCS are served by a Google provided and supported // global, high performance caching/content delivery network (CDN) service. // This task requires gsutil to be installed and configured. // For info on gsutil: https://cloud.google.com/storage/docs/gsutil. // gulp.task('publish:promote', () => { mdlPublish('promote'); }); // Push the staged version of the MDL microsite and release artifacts // to a production Google Cloud Storage bucket for staging and pre-production testing. // // This task requires gsutil to be installed and configured. // For info on gsutil: https://cloud.google.com/storage/docs/gsutil. // gulp.task('publish:staging', () => { mdlPublish('staging'); }); gulp.task('_release', () => { return gulp.src([ 'dist/material?(.min)@(.js|.css)?(.map)', 'LICENSE', 'README.md', 'bower.json', 'package.json', '.jscsrc', '.jshintrc', './sr?/**/*', 'gulpfile.babel.js', './util?/**/*' ]) .pipe(gulp.dest('_release')); }); gulp.task('publish:release', ['_release'], () => { return gulp.src('_release') .pipe($.subtree({ remote: 'origin', branch: 'release' })) .pipe(vinylPaths(del)); }); gulp.task('templates:styles', () => { return gulp.src('templates/**/*.css') .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) // FIXME: This crashes. It's a bug in gulp-csso, // not csso itself. //.pipe($.csso()) .pipe(gulp.dest('dist/templates')); }); gulp.task('templates:static', () => { return gulp.src('templates/**/*.html') .pipe($.replace('$$version$$', pkg.version)) .pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix)) .pipe(gulp.dest('dist/templates')); }); // This task can be used if you want to test the templates against locally // built version of the MDL libraries. gulp.task('templates:localtestingoverride', () => { return gulp.src('templates/**/*.html') .pipe($.replace('$$version$$', '.')) .pipe($.replace('$$hosted_libs_prefix$$', '')) .pipe(gulp.dest('dist/templates')); }); gulp.task('templates:images', () => { return gulp.src('templates/*/images/**/*') .pipe($.imagemin({ progressive: true, interlaced: true })) .pipe(gulp.dest('dist/templates')); }); gulp.task('templates:fonts', () => { return gulp.src('templates/*/fonts/**/*') .pipe(gulp.dest('dist/templates/')); }); gulp.task('templates', [ 'templates:static', 'templates:images', 'templates:fonts', 'templates:styles' ]); gulp.task('styles:gen', ['styles'], () => { const MaterialCustomizer = require('./docs/_assets/customizer.js'); const templatePath = path.join(__dirname, 'dist', 'material.min.css.template'); // TODO: This task needs refactoring once we turn MaterialCustomizer // into a proper Node module. const mc = new MaterialCustomizer(); mc.template = fs.readFileSync(templatePath).toString(); let stream = gulp.src(''); mc.paletteIndices.forEach(primary => { mc.paletteIndices.forEach(accent => { if (primary === accent) { return; } if (mc.forbiddenAccents.indexOf(accent) !== -1) { return; } const primaryName = primary.toLowerCase().replace(' ', '_'); const accentName = accent.toLowerCase().replace(' ', '_'); stream = stream.pipe($.file( `material.${primaryName}-${accentName}.min.css`, mc.processTemplate(primary, accent) )); }); }); stream.pipe(gulp.dest('dist')); });