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

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的更多相关文章

  1. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  2. gulp打包js/css时合并成一个文件时的顺序解决

    1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...

  3. gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn

    感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...

  4. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  5. 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨

    先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给 ...

  6. 【原】webpack结合gulp打包

    在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...

  7. gulp 打包合并

    1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm i ...

  8. 使用gulp打包普通项目

    前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...

  9. Rollup处理并打包JS文件项目实例

    关于Rollup rollup是一款用来es6模块打包代码的构建工具(支持css和js打包).当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用. 它的优点 ...

随机推荐

  1. Requests接口测试(三)

    一.定制请求头 我们先来看一下,关于请求头的定制演示,相信了解http协议的小伙伴应该对请求头部headers请求头部并不陌生,那么作为实际工作中的我们,如果想自定义一些请求头的信息,我们应该怎么办呢 ...

  2. DELPHI XE5 UP2 运行IOS 遇到 Wrapper init failed: (null)问题的解决办法

    一.问题表现: 在MAC OSX(10.9.2)上安装了比较新的XCODE5.1 和COMMAND LINE TOOLS 在DELPHI XE5 UP2上放了一个按钮,输出到MAC OSX上,出现: ...

  3. SignalR 跨域解决方案全面

    SignalR 分:PersistentConnection和Hub 2种模式. 跨域又分:UseCors和JsonP  2种方法 所以例子写了4种. 核心代码: UseCors //Persiste ...

  4. 禁用 C# 编译器对某段代码的警告

    发使用 C# 编译器编译一些项目的时候, C# 编译器可能会生成一些警告信息, 有些代码段的警告信息是程序员知道的,所以希望 C# 编译器不要对这段代码进行任何的警告. 在 VS 中的项目选项中可以对 ...

  5. 「BZOJ 3209」花神的数论题

    Title Link 戳我 Title Solution 这道题可以运用组合数的思想啊,数位dp也可以,随便你怎么做,这里就讲一讲组合数的做法吧,要小于n,所以我们可以枚举n二进制下1的位置,在i-1 ...

  6. docker--基本命令

    仅做学习参考,可能有误 part1:启动docker服务 在Windows上使用MySQL时候,有时无法直接使用MySQL -uroot -p 来进入MySQL,这是因为我们没有启动会MySQL服务此 ...

  7. linux 改变系统时间

    date  查看系统时间 date -s 04/05/16  日期设置成2016年4月5日 date -s 15:03:32  日期设置成2016年4月5日15:03:32 上述两步可以直接写成这样一 ...

  8. bzoj2564: 集合的面积(闵可夫斯基和 凸包)

    题面 传送门 题解 花了一个下午的时间调出了一个稍微能看的板子--没办法网上的板子和咱的不太兼容-- 首先有一个叫做闵可夫斯基和的东西,就是给你两个点集\(A,B\),要你求一个点集\(C=\{x+y ...

  9. nginx负载均衡fair模块安装和配置

    nginx-upstream-fair-master fair模块源码 官方github下载地址:https://github.com/gnosek/nginx-upstream-fair说明:如果从 ...

  10. CentOS7.3托管磁盘虚拟机扩容数据磁盘

    随着托管磁盘的上线,虚拟机支持的单块磁盘容量从1TB到达了4TB,客户对单块磁盘容量的需求量也会变的很大. 操作之前需要重点查看: 由于扩容磁盘的操作非同小可,一旦哪一步出现问题,就会导致分区损坏,数 ...