标签: gulp-usemin

我有这些要求:

1. 连接css文件.
2. 修改连接的css文件.
3. 由css文件(图像,字体等)引用的Rev资源文件.文件引用是相对的,来自第三方,所以我无法控制它们.
4. 重写css文件中的文件引用以进行加速,并使它们相对于连接文件而不是原始文件.

我的项目布局:

  dist/
    index.html
    app-<hash>.css
    bower_components/
      bootstrap/
        fonts/
          glyphicons-halflings-regular-<hash>.woff
          glyphicons-halflings-regular-<hash>.ttf
          etc...
  app/
    index.html
    appStyles.css
    bower_components/
      bootstrap/
          dist/
              css/
                bootstrap.css
                etc...
          fonts/
              glyphicons-halflings-regular.woff
              glyphicons-halflings-regular.ttf
              etc...

因此,作为一个例子,bootstrap.css使用相对路径引用glyphicons-halflings-regular.ttf:'../../ fonts/glyphicons-halflings-regular.ttf'.这需要重写为相对路径'bower_components/bootstrap/fonts/glyphicons-halflings-regular-hash.ttf'.

我已经能够得到一个gulp-usemin任务工作,连接我的CSS文件并转动输出.它甚至适用于源地图,这是一个奖励(不是必需的).

但是,我无法让usemin重写css文件中的路径来调整转速并使它们相对于连接文件.我该怎么做呢？我在css链中需要另一个插件吗？这是我到目前为止:

var resourcesRevved = [
    'app/bower_components/bootstrap/**/*.ttf',
    'app/bower_components/bootstrap/**/*.woff',
    etc...
];

gulp.task('copy:resources:revved', ['clean:dist'], function() {
    return gulp.src(resourcesRevved)
        .pipe(rev())
        .pipe(gulp.dest('dist'));
});

gulp.task('usemin', ['copy:resources:revved'], function() {
    return gulp.src('./app/index.html')
        .pipe(usemin({
            css: [
                sourcemaps.init({
                    loadMaps: true
                }),
                'concat',
                rev(),
                sourcemaps.write('.')
            ]
        }))
        .pipe(gulp.dest('dist/'));
    });

这是index.html中的usemin部分:

<!-- build.css app.css -->
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="app/appStyles.css">
etc... …

以下是我的index.html文件中的usemin构建配置示例

<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->

<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->

对于开发版本,我不想缩小脚本,我希望每个模块都有自己的js文件.所以index.html运行后会是

<script src="js/one.js"></script>
<script src="js/two.js"></script>

对于生产版本,我想缩小脚本并将它们连接成一个文件.所以index.html就是

<script src="js/myApp.js"></script>

我尝试了以下,但它不起作用:

<!-- build:myApp js/myApp.js -->
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->

<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- endbuild -->

并运行像这样的use-min任务(prod将在prod任务中设置为true,在dev任务中设置为false) -

usemin({
          myApp: prod?[uglify({mangle:true})]:'',
          js: prod?'':[uglify({mangle:false})]
      }).

我可以保留两个index.html文件并管理它.但我想知道这可以用一个index.html实现吗？

在此先感谢您的帮助.