使用Gruntjs的concat功能后，引用js文件的地址该如何处理？

Question

如下面的例子：

// Project configuration.
grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    },
  },
});

intro.js等三个文件合并成了built.js文件，对HTML文件中已经引用了into.js的script脚本：

<script type="text/javascript" src="intro.js"></script>

因为intro.js文件已经不存在，这个script脚本肯定要出错，应该如何处理？

Answer 1

html中全部使用

<script src="dist/built.js"></script>

在开发环境维护一个dist/built.js，内容为

document.write('<script src="src/intro.js"></script>')
document.write('<script src="src/project.js"></script>')
document.write('<script src="src/outro.js"></script>')

该文件在生产环境中覆盖。

Answer 2

其实有不少办法处理这个事情，在这里我只说说我是怎么做的。

首先，你得为项目的开发和部署划分两个环境，这在现代的开发中很常见。于是，配置文件里可以先记录这两个环境变量：

grunt.initConfig({
    info: {
        env: 'dev' // by default
    }
})

接着，思考一下替换路径的方式。我在这里推荐使用 Jade 来代替 Plain HTML，虽然我对 Jade 的语法也不是完全满意，不过它的确能提供很多便利性。Jade 既可以用做一些库／框架所需要的动态模版，也可以纯粹用来代替 HTML 编写静态页面。

如果可以用 Jade（或其他类似工具），那么 grunt-contrib-jade 这个插件允许在编译 Jade 的期间传递数据给模版：

jade: {
    example: {
        // 省略其他配置项
        options: {
            // 可传 object 或 function
            data: {
                env: '<%= info.env %>'
            }
        }
    }
}

这就意味着，Jade 可以在编译时判断 env 变量然后有条件的编译成 HTML，比如：

if env === 'dev'
  script(src='开发环境需要引入的那些文件')
else
  script(src='部署环境需要变化的文件路径')

最后，就剩一件事儿了，编写自定义任务，通过传递参数改变 env 的值：

grunt.registerTask('script', function (env) {
    if (env) {
        grunt.config.set('info.env', env); // 用传参重写配置的默认值
    }
    grunt.task.run('jade:example')
});

这个任务允许我们采用下列方式运行：

$ grunt script        # env === 'dev'
$ grunt script:pub    # env === 'pub'

于是，你可以自由搭配组合组成你的构建流程，且一次配置再也无需费心。

如果 Jade 是不可选项，比如说只能用静态 HTML，也不是没办法（举例）：

1. 利用插件提供的 options.process 做后期处理

2. 使用现成的插件，比如 grunt-useref

关于第一点，后期处理可以有很多种做法。你可以写两个不同的 HTML 文件（区别在于引的外部资源不同），然后在 concat 的时候，交换这俩文件的内容／文件名之类的（很显然，一个文件是做替补的）；也可以 geek 点，直接正则去替换文件的内容。

关于第二点，类似的插件在这里还有很多，有事没事多多探索。

使用 grunt 这样的工具时，不要把自己局限在前端工程师的思维领域里，因为有 Nodejs 在背后的支撑，我们可以做到所有系统编程都可以做到的事情。Be geek, be smarter

Answer 3

如果用过grunt-contrib-requirejs的话，你可以把dev的所有文件都打到同级build文件夹中。
测试在dev中测试，发版可以发布build。
前提是，你的js是用require js 组织依赖的。

Answer 4

watch这个任务，3个文件每次改动都concat生成build.js。
由于还没有uglify，所以是可以打断点调试的。
不想用grunt的话，可以上一些GUI工具，比如koala这类来帮助咱们进行监控合并压缩的任务。

Answer 5

这2个插件就是专门干这个事的。 yo的模板内建用的是第一个。

• https://github.com/yeoman/grunt-usemin
• https://github.com/spatools/grunt-html-build