gulp前端自动化工具的快速入门案例

最近项目和工作中要开始使用自动化工具了，回想一下以前接触这个的时候就是什么nodejs，grunt之类的了，这次干脆就用一个新的，那么就是gulp。。。

全局下利用npm安装gulp

sudo npm install -g gulp

项目中安装gulp包

npm install gulp --save-dev

这里创建一个示例项目demo，里面有index1.js，index2.js，index3.js三个文件

初始化项目

npm init .gulp

在执行gulp命令的之前记得在根目录下新建gulpfile.js文件，没有的话会报错，创建之后继续执行就ok。。。

编辑gulpfile.js文件

var gulp = require('gulp');//压缩js代码
var uglify = require('gulp-uglify');//合并js文件
var concat = require('gulp-concat');var paths = {scripts: ['index1.js', 'index2.js', 'index3.js']
}gulp.task('default', function() {gulp.src(paths.scripts).pipe(uglify()).pipe(concat('all.min.js')).pipe(gulp.dest('build'));
});

这里别忘记安装一下uglify和concat这两个插件，如下：

sudo npm install gulp-uglify --save-devsudo npm install gulp-concat --save-dev

最后就是执行一下gulp命令了

[21:41:38] Using gulpfile ~/Desktop/jikexueyuan/gulpfile.js
[21:41:38] Starting 'default'...
[21:41:38] Finished 'default' after 7.65 ms

看到这样的输出就好，在build文件夹下可以看到压缩合并之后的js文件了。。。

经过这面这几小步，gulp已经被你拿下了，如果还要深入去搞的话，狂戳这里

gulp前端自动化工具的快速入门案例相关推荐

（转）Bootstrap 之 Metronic 模板的学习之路 - （7）GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
【技术】基于angularJS的前端自动化测试工具Protractor快速入门
1.官网 http://www.protractortest.org/#/ 2.简介 Protractor是一个为Angular和AngularJS应用程序而生的端对端的测试框架,Protractor ...
python自动化运维快速入门pdf下载_我爱电子书-《Python自动化运维快速入门》| pdf + epub + mobi + awz3, 高清版, 带目录，Kindle版, 多看精排版下载...
Python自动化运维快速入门豆 0.0分资源最后更新于 2020-03-29 01:00:08 作者:郑征出版社:出版社清华大学出版社出版日期:2019-04 ISBN:9787302525 ...
SWMM从入门到实践教程 03 快速入门案例的设施参数设置与批量设置
文章目录 1 雨量计 1.1 雨量计基础设置 1.2 雨量计数据来源 2 汇水区 2.1 参数讲解 2.2 设置结果 3 检查井 3.1 参数讲解 3.2 批量设置 4 管道 4.1 参数讲解 4.2 ...
SWMM从入门到实践教程 02 快速入门案例的绘制
文章目录 1 建模准备 2 设置各类设施 2.1 添加雨量计 2.2 添加子汇水区(正方形) 2.3 绘制节点(圆形) 2.4 绘制管渠 2.5 添加排水口(三角形) 3 画面调节 1 建模准备建模 ...
前端自动化工具 grunt 插件 uglify 的简单使用（一）
Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less ...
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
目录本文中修改的原代码中的BUG: 修改方法: 本文案例代码仍有的BUG:(欢迎大家献计献策) 目标效果: 悦音player案例--效果展示视频: 更换的新接口/参数: 1.歌曲搜索接口:https ...
03_RabbitMQ快速入门案例
RabbitMQ快速入门案例新建一个maven过程导入依赖 <dependency><groupId>com.rab ...
matlab快速入门案例及常用技巧 | 《matlab数学建模方法与实践（第三版）》学习笔记
目录快速入门案例: 解决流程: 具体实现: 一.获取数据二.数据探索和建模三.分享结果常用技巧一.常用标点功能二.常用操作指令三.指令编辑操作键四.matlab数据类型五.开发模式 ...

gulp前端自动化工具的快速入门案例

全局下利用npm安装gulp

项目中安装gulp包

初始化项目

编辑gulpfile.js文件

最后就是执行一下gulp命令了

gulp前端自动化工具的快速入门案例相关推荐

最新文章

热门文章