Animations stop working after building project scaffolded by Fountain Webapp Generator

Fix is very quick and clean. In gulp_tasks/build.js pass additional parameters to cssnano:

  return gulp.src(conf.path.tmp('/index.html'))
    .pipe(inject(partialsInjectFile, partialsInjectOptions))
    .pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))
    .pipe(jsFilter)
    .pipe(ngAnnotate())
    .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    .pipe(rev())
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    // 8<------ HERE
    .pipe(cssnano({
      reduceIdents: {
        keyframes: false
      },
      discardUnused: {
        keyframes: false
      }
    }))
    // ------>8 HERE
    .pipe(rev())
    .pipe(cssFilter.restore)
    .pipe(revReplace())
    .pipe(sourcemaps.write('maps'))
    .pipe(htmlFilter)
    .pipe(htmlmin())
    .pipe(htmlFilter.restore)
    .pipe(gulp.dest(conf.path.dist()));

return gulp.src(conf.path.tmp('/index.html'))

.pipe(inject(partialsInjectFile, partialsInjectOptions))

.pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))

.pipe(jsFilter)

.pipe(ngAnnotate())

.pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))

.pipe(rev())

.pipe(jsFilter.restore)

.pipe(cssFilter)

// 8<------ HERE

.pipe(cssnano({

reduceIdents: {

keyframes: false

discardUnused: {

keyframes: false

}

}))

// ------>8 HERE

.pipe(rev())

.pipe(cssFilter.restore)

.pipe(revReplace())

.pipe(sourcemaps.write('maps'))

.pipe(htmlFilter)

.pipe(htmlmin())

.pipe(htmlFilter.restore)

.pipe(gulp.dest(conf.path.dist()));

Leave a Reply Cancel reply