成都-第六十一期如何使用gulp

Posted 2021-04-08 葡萄藤IT技能树

1.背景介绍    

 基于‘流’的自动化构建工具 

1 易于使用 

2 构建快速

 3 插件高质 

4 易于学习

   

2.知识剖析 

易于使用 

1 代码优于配置 构建快速 

2 减少频繁的 IO 操作 插件高质 

3 严格的插件指南 易于学习 

4 最少的 API 

3.常见问题 

什么是流？ 

为什么要使用gulp? 

如何使用gulp 

4.解决方案

 gulp的JS文件压缩 

5.编码实战 node -v //查看node版本 npm -v //查看npm版本 

npm install -g gulp //使用npm下载

gulp gulp -v //查看gulp版本 

进入项目根目录建立一个package.json //说明：package.json是基于nodejs项目必不可少的配置文件， 它是存放在项目根目录的普通json文件；

 cnpm init -y 

//自动设置配置文件 插件安装

 //压缩代码 （gulp-uglify）

 //npm install gulp-uglify --save-dev 

新建gulpfile.js /** * Created by Administrator on 17.2.15. */ 

//引入组件 var gulp = require('gulp'), uglify = require('gulp-uglify');

//压缩文件插件

 //创建任务

 //gulp.task(name[, deps], fn)

 //name 为任务名 

//deps 是当前定义的任务需要依赖的其他任务

 //fn 为任务函数 gulp.task('jsmin', function () { gulp.src('*demo/js-10-gulp/demo.js') .pipe(uglify()) .pipe(gulp.dest('PPT/mo.js')); }); 

6.扩展思考 无 

7.参考文献 参考一：gulp API 文档 参考一：Gulp的安装配置过程和一些小坑 参考一：前端构建工具gulpjs的使用介绍及技巧 参考一：gulp详细入门教程

 8.更多讨论 gulp和grunt的区别

PPT:https://ptteng.github.io/PPT/PPT/js-10-how-to-use-gulp.html