为什么用gulp把多个js文件合并压缩后，再直接引入页面就报错了

JavaScript06

为什么用gulp把多个js文件合并压缩后，再直接引入页面就报错了,第1张

合并成一个JS文件之后，代码的作用域扩大，难免会造成冲突。找到报错的代码所在位置，找到原JS文件修改下。

举个例子：a.js 中有var foo = 1b.js 中也有 var foo = 10 那么合并之后就会有两个 foo 变量， 这样一来在新的js文件中，foo的值就是写在后面的一个，而恰好后面的值会冲突报错。

因此，在合并之前需要确定每个js文件都能正常工作，而且没有函数、变量上的冲突。

1.首先，在项目根目录下创建一个文件package.json ，内容如下：

{ "name": "demo", "version": "0.1.0-SNAPSHOT", "description": "spring-boot and angularJS", "private": true, "dependencies": {}, "devDependencies": { //项目需要依赖的前端插件(注意：拷贝进去时这段注释要删掉)"gulp": "^3.9.0","gulp-util": "^3.0.7","gulp-cssnano": "^2.1.0","gulp-htmlmin": "^1.3.0","gulp-imagemin": "^2.4.0","gulp-uglify": "^1.5.1","gulp-filter": "^3.0.1","gulp-replace": "^0.5.4","gulp-useref": "^3.0.5","gulp-autoprefixer": "^3.1.0","gulp-ng-annotate": "^1.1.0","gulp-sass": "^2.1.1","gulp-rev": "^6.0.1","gulp-rev-replace": "^0.4.3","gulp-flatten": "^0.2.0","gulp-jshint": "^2.0.0","gulp-htmlhint": "^0.3.1","jshint-stylish": "^2.1.0","htmlhint-stylish": "^1.0.3","wiredep": "^3.0.0","browser-sync": "^2.11.1","del": "^2.2.0","http//:baidu.com": "^0.9.1"

}

}

2.其次，cmd进入项目根目录，运行命令npm install，它将把package.json中声明的依赖插件都down下来，并在项目根目录下生成文件夹node_modules,并将插件保存在其中。

3.在项目根目录下创建一个文件gulpfile.js，内容如下：

"use strict"

var gulp = require('gulp'), //将上面down下来的插件都要引入，以便需要

gutil = require('gulp-util'),

wiredep = require('wiredep').stream

gulp.task('html', function() { // 创建task任务:可以在cmd命令中执行任务

gulp.src('src/main/webapp/index.html')

.pipe(wiredep({ // 调用插件wiredep执行方法

optional: 'configuration',

goes: 'here'：http://www.baidu.com/}))

.pipe(gulp.dest('src/main/webapp'))

})

4.接着在项目根目录下创建一个文件:.bowerrc,创建完毕后在IDE中会被隐藏。文件内容如下:

{ "directory" : "src/main/webapp/bower_components"}

http://r.yuzhua.com

显而易见，这个文件的作用是指定bower install时，下载的angularJS等插件存放的目录位置。如果没有这个文件，那么通过bower命令下载的插件将会被保存在项目根目录下。

5.在项目根目录下创建文件:bower.json，内容如下:：http://www.baidu.com/

{ "name": "demo", "description": "spring-boot and angularJS", "version": "0.1.0-SNAPSHOT", "keywords": ["the first project of spring-boot and angularJS"

], "private": true, "ignore": ["**/.*","node_modules","src/main/webapp/bower_components","src/main/webapp/lib","src/main/java","src/main/resources","src/test","target"

], "dependencies": { //依赖的插件，bower install时将会下载的插件，具体作用自行百度（拷贝进去时这段注释要删掉）"angular": "1.5.5","angular-resource": "1.5.5","angular-cookies": "1.5.5","angular-messages": "1.5.5","angular-animate": "1.5.5","angular-sanitize": "1.5.5","angular-aria": "1.5.5","angular-route": "1.5.5","angular-i18n": "1.5.5","angular-material": "1.0.4","angular-ui-router": "0.2.15","angular-ui-validate": "1.2.2","codemirror": "5.14.2","angular-ui-codemirror": "0.3.0","angular-loading-bar": "0.9.0","angular-local-storage": "0.2.7","angular-material-data-table": "0.10.9","angular-once": "0.1.9","moment": "2.10.6","angular-moment": "1.0.0-beta.3","Chart.js": "1.0.2","angular-chart.js": "0.8.8","angular-filter": "0.5.8","ng-file-upload": "^12.0.4","editor.md": "1.5.0","jquery": "3.1.0"：http://www.baidu.com/ }, "devDependencies": {"angular-moc：http://www.baidu.com/ks": "1.5.5","angular-scenario": "1.5.5"

}, "resolutions": {"angular": "1.5.5","Chart.js": "1.0.2","moment": "2.10.6"

}