gulp 安装与使用

一、Gulp 是基于node.js 流(stream的一个前端自动化构建工具可以使用它构建自动化工作流程简化我们工作量,让我们把重点放在功能的开发上,从而提高我们的开发效率和工作质量

 我们可以gulp自动刷新网页,sass进行预处理、代码检测、图片优化压缩、这一切,只需要一个简单的指令就能全部完成。

 

二、开始安装

 

1、全局安装

cnpm install gulp -g

2、检查版本

gulp -v

3、本地安装gulp, 作为开发依赖

cnpm install gulp -D

 

二、使用

1、创建配置文件 (根目录下新建 gulpfile.js 文件)

 gulp 安装与使用_第1张图片

console.log('gulp启动成功!');   //测试gulp是否启动成功

 

2、命令行执行gulp

gulp 安装与使用_第2张图片

 

三、使用实例

1、下载丑化工具(压缩)

【注意:gulp压缩时不支持es6语法,如果你有es6以上的语法,请先转译为es6在进行压缩】

cnpm i gulp-uglify --save-D

 

 2、构建第一个 gulp 流程

gulp 安装与使用_第3张图片

- 命令行执行 gulp js 

gulp 安装与使用_第4张图片

 

 

3、创建index.js         

命令行执行 gulp js  后自动构建dist/index.js   (index.js  -  ./dist/js/index.js)

gulp 安装与使用_第5张图片

 

 

 4、任务演示 - 同时执行多个任务

gulp 安装与使用_第6张图片

命令行执行 glup some

 

 

四、监听

1、同时监听 less 和 js

gulp 安装与使用_第7张图片

 

2、任务演示 - 监听 js 改变,自动执行 js 压缩任务

gulp 安装与使用_第8张图片

命令行执行 glup watchjs

 

3、压缩成功

gulp 安装与使用_第9张图片

 

 

 

 

 

 

转载于:https://www.cnblogs.com/Lehh/p/9643764.html

你可能感兴趣的:(gulp 安装与使用)