gulp打包js

在终端定位到你要创建目录的地方，输入

sudo mkdir js

创建文件夹，这个文件夹就是放你要压缩js文件的地方

输入

sudo vim gulpfile.js

这个js就是写gulp所有的配置信息，

在这个js中输入：

var gulp=require ("gulp") //获取gulp

var uglify=require ("gulp-uglify") //获取gulp-ublify组建

gulp.task("script", function(){

    gulp.src("js/*.js") //找到js文件夹下的所有js

           .pipe(uglify()) //压缩文件

           .pipe(gulp.dest("dist/js")) //压缩完成后的文件另存到dist/js/目录下

})

gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。

gulp.src(path) - 选择文件，传入参数是文件路径。

gulp.dest(path) - 输出文件

gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

此时你还需要安装一个局域的gulp(我没安装各种报错)

在gulplify.js的平级下打开终端，输入

sudo cnpm install gulp      //此处不需要 “-g”

然后安装gulp-uglify模板，命令如下：

sudo cnpm install gulp-uglify

输出如果没有扎眼的红色提示则表示安装成功

这时输入

gulp script

如果输出中有Finished "script" after ...即表示压缩成功

这时你去文件夹目录下便能看到一个叫dist的文件夹，这个文件夹下的js文件就是压缩成功后的代码

当然这样如果js下的文件有变化就需要自己重新输入一遍gulp script，不是很人性化
所以加入一条自动检测代码：

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

    // 监听文件修改，当文件被修改则执行 script 任务

    gulp.watch('js/*.js', ['script'])

})

当然watch跑起来就进入运行状态，此时你不能再输入别的操作，当然想要输入别的命令则需要关闭watch即可，命令：

ctrl+C（Mac为Control +C）

当然我们也可以把它定义成默认事件，只需要在终端输入gulp然后回车便可让程序运行，代码如下：

gulp.task('default', ['script', 'auto']);

最终版代码：

var gulp = require ("gulp")

var uglify = require("gulp-uglify")

gulp.task("script", function(){

    gulp.src("js/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"))

})

gulp.task("auto",function(){

    gulp.watch("js/*js",["script"])

})

gulp.task("default",["script","auto"])

巴特西

gulp打包js

最新文章

热门文章