gulp 4.0--前端构建工具基本环境搭建及使用

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务:

• 搭建web服务器
• 文件保存时自动重载浏览器
• 使用预处理器如Sass,Less
• 优化资源,比如压缩CSS,JavaScript,压缩图片

 

和其他构建工具相比优势在于:

• 简洁
• 执行效率更高
• 与平台无关-集成被集成到所有主流IDE中.
• 强大的生态系统

 

"Automate and enhance your workflow"  --gulp

一 gulp的安装

"基于node环境"

 

(1)、Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
(2)  下载Node.js
打开官网下载链接:https://nodejs.org/en/download/ 

在官网(https://nodejs.org/en/)下载pkg包,我下载的版本为6.9.5,大小为15.5M。下载的安装包双击下一步安装即可。

 

查看是否成功:

 

1.全局安装

npm install -g  gulp
   

2.项目安装,切换到项目目录安装

npm install gulp 

如果需要把gulp写进项目

package.json文件的依赖中，则可以加上--save-dev

npm install --save-dev gulp
 install --save-dev gulp

查看 gulp版本

➜   gulp -version  [16:44:22] CLI version 2.0.116:44:22] CLI version 2.0.1

[16:44:22] Local version 4.0.016:44:22] Local version 4.0.0

安装4.0 gulp

npm install gulp@next -D

3.在项目根目录下创建一个名为gulpfile.js的文件

//这里是gulp 3.+版本写法

var gulp = require('gulp');

gulp.task('default',function(){
  

//将你的默认的任务代码放在这

});

//gulp 4.0

// 只需要在`series` 和 `parallel` 中间引用函数名就能组成一个新任务

gulp.task('local', gulp.series(clean, gulp.parallel(php, js), watch))

// 把单个任务变成一个函数