html引用对应地址js脚本,使用Gruntjs的concat功能后，引用js文件的地址该如何处理？...

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

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

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: ''

}

}

}

}

这就意味着，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，也不是没办法(举例)：

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

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

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