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的更多相关文章
- 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题
在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...
- gulp打包js/css时合并成一个文件时的顺序解决
1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...
- gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn
感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨
先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给 ...
- 【原】webpack结合gulp打包
在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...
- gulp 打包合并
1.安装node.js 下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm i ...
- 使用gulp打包普通项目
前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...
- Rollup处理并打包JS文件项目实例
关于Rollup rollup是一款用来es6模块打包代码的构建工具(支持css和js打包).当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用. 它的优点 ...
随机推荐
- 浅谈Android内存管理
最近在网上看了不少Android内存管理方面的博文,但是文章大多都是就单个方面去介绍内存管理,没有能全局把握,缺乏系统性阐述,而且有些观点有误,仅仅知道这些,还是无法从整体上理解内存管理,对培养系统优 ...
- 常用eclipse插件
http://dist.springsource.com/release/TOOLS/update/e4.4/ http://propedit.sourceforge.jp/eclipse/upda ...
- HDU 4118 Holiday's Accommodation (dfs)
题意:给n个点,每个点有一个人,有n-1条有权值的边,求所有人不在原来位置所移动的距离的和最大值. 析:对于每边条,我们可以这么考虑,它的左右两边的点数最少的就是要加的数目,因为最好的情况就是左边到右 ...
- 在IE11(Win8)中检查up6.2配置
1.按F12,打开调试模式 2.打开调试程序选项卡 说明:在调试程序选项卡中可看到IE加载的脚本信息是否正确.因为IE有缓存,导致脚本有时不是最新的. 3.打开脚本,up6.js ...
- whereis libjpeg.so.7
在服务器上调用import ImageFont时报如下错误 ImportError: The _imagingft C module is not installed (服务器为Centos5.5, ...
- 来自网易云的黑科技,带尖角的div......
今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了··· 大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用 ...
- WPF中在摄像头视频上叠加控件的解决方案
一.视频呈现 前段时间,在一个wpf的项目中需要实时显示ip摄像头,对此的解决方案想必大家都应该知道很多.在winform中,我们可以将一个控件(一般用panel或者pictruebox)的句柄丢给摄 ...
- angular 第二种依赖注入
import { Injectable } from '@angular/core'; import { ProductServiceService, Product } from './produc ...
- shipyard
https://www.ivankrizsan.se/2016/07/10/managing-containers-shipyard/ kubernetes中文社区:https://www.kuber ...
- 返回类型和 return 语句
return 语句终止当前正在执行的函数并将控制权返回到调用该函数的地方.return 语句有两种形式: return; return expression; 不要返回局部对象的引用或指针: 函数完成 ...