gulp入坑系列(2)——初试JS代码合并与压缩
来源:互联网 发布:html5 json 数据解析 编辑:程序博客网 时间:2024/06/06 23:55
在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能
gulp入坑系列(1)——安装gulp(传送门):http://blog.csdn.net/u013034014/article/details/53543223
在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下:
index.js:
var index={};index={test:function(argument){console.log('test');}}index.test();
main.js:
var main = {};main.test=function(argument){console.log("main test");}main.test();
在根目录下新建index.html ,在其中引用build下的all.min.js。
index.html:
<script type="text/javascript" src="build/all.min.js"></script>接下来编辑gulpfile.js文件,来告诉gulp我们要把index.js,main.js合并起来压缩再写入all.min.js中
gulpfile.js:
var gulp = require('gulp');//gulp自身var uglify= require('gulp-uglify');//引入压缩组件var concat = require('gulp-concat');//引入合并组建var paths = {scripts:['js/index.js','js/main.js']} //定义要操作的文件路径gulp.task('default', function() { gulp.src(paths.script)//找到项目下paths变量所定义的script文件 .pipe(uglify())//压缩 .pipe(concat('all.min.js'))//输入到all.min.js中 .pipe(gulp.dest('build'));//指定目录});
tips:gulp的执行流程采用了流式操作,每一个pipe()可以理解成,上一个操作的输出,就是下一个操作的输入,比如uglify()压缩后输出的,就是concat要输入到文件中的,而concat输出的文件,是gulp.dest要加入的目录中的,可以理解成每部操作都return了下一步要使用的东西。
最终目录结构如下:
接下来就可以在命令行工具中cd到项目的根目录中执行gulp指令了。
此时也许会出现 Cannot find module 'gulp-uglify'这样的报错,是因为gulpfile所require的gulp-uglify和gulp-concat插件并不存在,所以可以利用npm在项目中装入即可:
npm install --save-dev gulp-uglify 回车
npm install --save-dev gulp-concat 回车
安装完成后再次执行gulp指令,成功后,可以查看一下我们原本空的all.min.js文件,可以看到main.js和index.js已经在all.min.js中压缩合并了
var index={};index={test:function(e){console.log("test")}},index.test();var main={};main.test=function(n){console.log("main test")},main.test();
说明gulp成功执行了JS文件的合并与压缩的操作。
- gulp入坑系列(2)——初试JS代码合并与压缩
- gulp入坑系列(4)——gulp的代码转换
- gulp入坑系列(1)——安装gulp
- gulp压缩js代码
- 使用gulp压缩合并代码
- gulp 压缩合并Css 混淆压缩js
- gulp-uglify《JS压缩》----gulp系列(四)
- gulp入坑系列(3)——创建多个gulp.task
- gulp合并压缩JS和CSS
- gulp JS文件合并和压缩
- gulp 整合、压缩js、css代码
- Gulp编译、合并、压缩
- gulp 实现 js、css,img 合并和压缩
- gulp篇:速玩JS文件合并和压缩
- gulp 实现 js、css,img 合并和压缩
- gulp 实现 js、css,img 合并和压缩
- Grunt插件之uglify--js代码压缩与合并
- gulp CSS合并、压缩与MD5命名及路径替换
- LINUX 软件磁盘阵列搭建等级的概述
- 高手总结的“恋爱法”学习Linux系统,效果更好。
- 利用virtualbox增强器实现本机与kali linux的文件共享(macOS)
- 第十六周项目1--验证算法--(7)归并排序
- Python----字符编码方法
- gulp入坑系列(2)——初试JS代码合并与压缩
- [webrtc] rtcp模块中rtt时间计算
- 第一次参加全国noi大赛后感受
- 第三章
- 常用概率不等式
- Unicode也是一种字符编码方法,容纳65536个字符
- Tesseract编译安装
- 第十五周oj训练——字符串分段(串)(2279)
- 第十六周项目1--验证算法--(8)基数排序