Polymer Custom Build Crisper Babel

Question

Im using the example of the gulpfile.js that is provided in the polymer-init-custom-build project.

Im trying to optimize my code using Vulcanize Crisper Babel (https://www.polymer-project.org/1.0/docs/tools/optimize-for-production). I add the following code to my gulpfile.js in order to make this and i have the following error:

The following tasks did not complete: default, output

Did you forget to signal async completion?

function source() {
 return project.splitSource()
// Add your own build tasks here!         
.pipe(gulpif('src/*.*',crisper()))
.pipe(gulpif('src/*.js',babel()))
.pipe(gulpif('src/*.html', strip()))
.pipe(gulpif('**/*.{png,gif,jpg,svg}', images.minify()))
.pipe(gulpif('src/*.html', minifyInline()))
.pipe(gulpif('src/*.html', htmlmin({collapseWhitespace: true})))
.pipe(project.rejoin()); // Call rejoin when you're finished
}

Is there any way to implement this?

Answer 1

Removing the vulcanize and crisper it works because both of those are handled by the library.

Here is my final code that it works and make vulcanize crisper and babel:

 * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.

'use strict';

const path = require('path');
const gulp = require('gulp');
const gulpif = require('gulp-if');



// Got problems? Try logging 'em
// const logging = require('plylog');
// logging.setVerbose();

// !!! IMPORTANT !!! //
// Keep the global.config above any of the gulp-tasks that depend on it
global.config = {
  polymerJsonPath: path.join(process.cwd(), 'polymer.json'),
  build: {
    rootDirectory: 'build',
    bundledDirectory: 'bundled',
    unbundledDirectory: 'unbundled',
    // Accepts either 'bundled', 'unbundled', or 'both'
    // A bundled version will be vulcanized and sharded. An unbundled version
    // will not have its files combined (this is for projects using HTTP/2
    // server push). Using the 'both' option will create two output projects,
    // one for bundled and one for unbundled
    bundleType: 'both'
  },
  // Path to your service worker, relative to the build root directory
  serviceWorkerPath: 'service-worker.js',
  // Service Worker precache options based on
  // https://github.com/GoogleChrome/sw-precache#options-parameter
  swPrecacheConfig: {
    navigateFallback: '/index.html'
  }
};

const clean = require('./gulp-tasks/clean.js');
const images = require('./gulp-tasks/images.js');
const uglify =  require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const project = require('./gulp-tasks/project.js');
var minifyInline = require('gulp-minify-inline');
var strip = require('gulp-strip-comments');
const babel = require('gulp-babel');
var crisper = require('gulp-crisper');

// The source task will split all of your source files into one
// big ReadableStream. Source files are those in src/** as well as anything
// added to the sourceGlobs property of polymer.json.
// Because most HTML Imports contain inline CSS and JS, those inline resources
// will be split out into temporary files. You can use gulpif to filter files
// out of the stream and run them through specific tasks. An example is provided
// which filters all images and runs them through imagemin
function source() {
  return project.splitSource()
    .pipe(gulpif('**/*.js', uglify()))
    .pipe(gulpif('src/**/*.js',babel({
            presets: ['es2015']
        })))
    .pipe(gulpif('src/**/*.html', strip()))
    .pipe(gulpif('**/*.{png,gif,jpg,svg}', images.minify()))
    .pipe(gulpif('src/**/*.html', minifyInline()))
    .pipe(gulpif('src/**/*.html', htmlmin({collapseWhitespace: true})))    
    .pipe(project.rejoin()); 
// Call rejoin when you're finished
}

// The dependencies task will split all of your bower_components files into one
// big ReadableStream
// You probably don't need to do anything to your dependencies but it's here in
// case you need it :)
function dependencies() {
  return project.splitDependencies()
    .pipe(gulpif('**/*.js', uglify()))
    .pipe(gulpif('**/*.html', strip()))
    .pipe(gulpif('**/*.{png,gif,jpg,svg}', images.minify()))
    .pipe(gulpif('**/*.html', minifyInline()))
    .pipe(gulpif('**/*.html', htmlmin({collapseWhitespace: true})))
    .pipe(project.rejoin());
}



// Clean the build directory, split all source and dependency files into streams
// and process them, and output bundled and unbundled versions of the project
// with their own service workers

gulp.task('default', gulp.series([
  clean.build,
  project.merge(source, dependencies),
  project.serviceWorker
]));