Web Components内联脚本的批量CSP处理

说在前面, 此CSP为Content Security Policy, 并非CS里的Communicating sequential processes.

这几天脑抽想把Polymer做的东西运用到Chrome App上, 通读了一遍Chrome App的官方教程后, 发现Polymer官方的Web Components普遍使用了内联脚本(Inline script), 这就违反了Chrome App遵循的CSP策略, 基本都不能直接在Chrome App里使用.

可我又能怎么办呢? Web Compoents这么多, 总不能一个一个的去手动修改. Google之后发现, Polymer官方早就想到了这个问题, 自家生产的库不能在自家的平台上运行, 岂不怪哉, 于是他们就搞了个vulcanize出来, 用于解决HTML Imports在各种场景下的问题, 其中就包含CSP.

但是Polymer的那篇文章是Polymer 0.5时发的, 现在Polymer已经是1.0版本了, vulcanize也把CSP处理的功能独立出来搞了个crisper, Polymer团队在更新Polymer的同时也顺应了Google旗下项目的一贯风格, "懒得"在1.0版本的文档里说明CSP问题的解决方案(也许只是我没有找到).

这个crisper项目目前也处于比较冷门的状态, 构建工具里的grunt和broccoli都没有配备上专门的插件, 唯一一个gulp插件还是第三方程序员给实现的, 不过托早就抛弃grunt转投gulp的福, gulp-crisper还是可以一用的, 但是问题又来了.

gulp-crisper插件不能像别的gulp插件一样对node-glob的目录进行模式匹配, 这就导致了gulp-crisper不能输出CSP处理后的文件到各个Web Compoents的目录, 在gulp-crisper的Github上也已经有人提交了修复这个问题的pull request, 但是由于各种原因还是没能把代码给合并进去, 源代码也确实有些问题, 本来我想自己发一个pull request, 但是鉴于我最近写的JavaScript越来越坚持自己的风格(比如var 4空格缩进和弃用分号), 又懒得写测试, 不便去修改别人的代码, 只好自己建了个BlackGlory/gulp-crisper来解决燃眉之急, 当然也不打算提交到npm.

我的gulp-crisper主要是应用在bower+gulp的构建场景上的, 首先从bower_components复制所有库到build目录, 再执行crisper进行CSP处理将原html文件分离成html和js, 最后分别输出文件到相应库的目录进行覆盖.

gulpfile.js如下:

'use strict'

let gulp = require('gulp'),  
    crisper = require('gulp-crisper')

let output = 'build'

gulp.task('copy', function () {  
  return gulp.src('bower_components/**/*')
    .pipe(gulp.dest(`./${output}/lib`))
})

gulp.task('crisper', ['copy'], function () {  
  return gulp.src('bower_components/**/*.html')
    .pipe(crisper())
    .pipe(gulp.dest(`./${output}/lib`))
})