/** * * Material Design Styleguide * 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 * */ '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 reload = browserSync.reload; var fs = require('fs'); var path = require('path'); var pkg = require('./package.json'); var banner = ['/**', ' * <%= pkg.name %> - <%= pkg.description %>', ' * @version v<%= pkg.version %>', ' * @link <%= pkg.homepage %>', ' * @license <%= pkg.license %>', ' */', ''].join('\n'); 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('src/**/*.js') .pipe(reload({stream: true, once: true})) .pipe($.jshint()) .pipe($.jshint.reporter('jshint-stylish')) .pipe($.if(!browserSync.active, $.jshint.reporter('fail'))); }); // Optimize Images // TODO: Update image paths in final CSS to match root/images gulp.task('images', function () { return gulp.src('src/**/*.{svg,png,jpg}') .pipe($.cache($.imagemin({ progressive: true, interlaced: true }))) .pipe(gulp.dest('./images')) .pipe($.size({title: 'images'})); }); // Compile and Automatically Prefix Stylesheets (dev) gulp.task('styles:dev', function () { return gulp.src([ 'src/**/**/*.scss' ]) .pipe($.changed('.tmp/styles', {extension: '.css'})) .pipe($.sass({ precision: 10, onError: console.error.bind(console, 'Sass error:') })) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe(gulp.dest('.tmp/styles')) .pipe($.size({title: 'styles'})); }); // Compile and Automatically Prefix Stylesheets (production) gulp.task('styles', function () { // For best performance, don't add Sass partials to `gulp.src` return gulp.src([ 'src/styleguide.scss' ]) //.pipe($.changed('.tmp/styles', {extension: '.css'})) .pipe($.sass({ precision: 10, onError: console.error.bind(console, 'Sass error:') })) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe(gulp.dest('.tmp')) // Concatenate Styles .pipe($.concat('material.css')) .pipe($.header(banner, {pkg: pkg})) .pipe(gulp.dest('./css')) // Minify Styles .pipe($.if('*.css', $.csso())) .pipe($.concat('material.min.css')) //.pipe($.header(banner, {pkg: pkg})) .pipe(gulp.dest('./css')) .pipe($.size({title: 'styles'})); }); // Concatenate And Minify JavaScript gulp.task('scripts', function () { var sources = [ // Component handler 'src/wskComponentHandler.js', // Polyfills/dependencies 'src/third_party/**/*.js', // Base components 'src/animation/animation.js', 'src/button/button.js', 'src/checkbox/checkbox.js', 'src/column-layout/column-layout.js', 'src/icon-toggle/icon-toggle.js', 'src/item/item.js', 'src/radio/radio.js', 'src/slider/slider.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', // And finally, the ripples 'src/ripple/ripple.js' ]; return gulp.src(sources) .pipe($.sourcemaps.init()) // Concatenate Scripts .pipe($.concat('material.js')) .pipe($.header(banner, {pkg: pkg})) .pipe(gulp.dest('./js')) // Minify Scripts .pipe($.uglify({preserveComments: 'some', sourceRoot: '.', sourceMapIncludeSources: true})) .pipe($.concat('material.min.js')) // Write Source Maps .pipe($.sourcemaps.write('./')) .pipe(gulp.dest('./js')) .pipe($.size({title: 'scripts'})); }); // Run Unit Tests gulp.task('mocha', function () { return gulp.src('./test/*.js', { read: false }) .pipe(mocha({reporter: 'list'})) }); // Clean Output Directory gulp.task('clean', del.bind(null, ['.tmp', 'css/*', 'js/*', '!dist/.git'], {dot: true})); // Watch Files For Changes & Reload gulp.task('serve', ['styles:dev'], function () { browserSync({ notify: false, // Customize the BrowserSync console logging prefix logPrefix: 'WSK', server: ['.tmp', 'src', '.tmp/styles'] }); gulp.watch(['src/**/**/**/*.html'], reload); gulp.watch(['src/**/**/*.{scss,css}'], ['styles:dev', reload]); gulp.watch(['src/**/*.js'], ['jshint']); }); // Build and serve the output from the dist build gulp.task('serve:dist', ['default'], function () { browserSync({ notify: false, logPrefix: 'WSK', server: './', baseDir: "src" }); }); // Build Production Files, the Default Task gulp.task('default', ['clean'], function (cb) { runSequence( 'styles', ['jshint', 'scripts', 'images'], cb); });