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

JavaScript016

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

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

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

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

选择configuretaskrunner自动创建task.json。该配置文件在工作空间的.vscode目录下,这个目录也是存放vscode配置的文件夹。vscode默认的task配置文件中给出了执行tsc和gulp模板配置。简单介绍一下task.json的写法{"version":"0.1.0",//要使用的命令或者可执行文件的路径"command":"tsc",//对应command参数,是否是一个命令,否则为执行文件路径"isshellcommand":true,//是否在执行task任务时显示控制台窗口"showoutput":"always",//对应command参数指定程序的参数"args":["-p","src","--allowjs","-w"],//不太明白这个,基本用不到"problemmatcher":"$tsc",}

这里并不讲什么 gulp 及其其插件的安装,此前的文章已经提到过了。这里主要用来记录一下,gulp构建工具的一些简单常用的用法。

最有用的Gulp插件汇总

1)假如我们想使用gulp压缩js文件并合并js文件,应如何操作呢看

使用gulp-uglify和gulp-concat插件,gulpfile.js 大致如下:

/**

* Created by DreamBoy on 2016/8/19.

*/

var gulp = require('gulp')

var gutil = require('gulp-util')

var uglify = require('gulp-uglify')

var concat = require('gulp-concat')

gulp.task('concat', function() {

// 你的默认的任务代码放在这

gulp.src('./src/*.js')

.pipe(uglify())

.pipe(concat('all.min.js'))

.pipe(gulp.dest('./build'))

})

gulp.task('default', ['concat'])

// 在命令行中运行 gulp

/*

默认的名为default的任务(task)将会被运行,在这里,这个任务并未做任何事情。

想要单独执行特定的任务(task),请输入gulp <task><othertask>。

*/

更加详细的用法可以参考:gulp教程之gulp-uglify