当前位置: 首页 » 代码 » javascript » 前端自动化构建利器gulp.js——①gulp介绍与安装

前端自动化构建利器gulp.js——①gulp介绍与安装

发布时间:2018-04-20

javascript 代码

热度:3,455

摘要


各平台、浏览器兼容前缀记不住?需要合并或压缩大量样式or脚本文件?你还在不停的按F5刷新页面?…… 如果你在前端开发中遇到上述问题,那么恭喜你,首先你已经开始在前端的起点跑起来了,接下来我们就来想办法解决上面的这些问题,把一些繁琐的、没意义的、重复的工作交给工具来处理,我们专注与其他地方。今天就给大家介绍一下gulp.js——前端自动化构建工具。

备注:本人gulp.js与相关的插件学习均来自网络资源,如有遗漏或错误,烦请联系我或评论里斧正

1.gulp.js简介

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

上述简介引自: 一点——gulp.js详细入门教程

在学习过程中我发现许多教程写gulp.js的时候都提到了grunt,但是我之前没有接触过grunt,所以不了解两者有何不同和区别,有兴趣的朋友可以自行搜索查找。

2.Node.js的下载与安装

既然gulp.js是基于Node.js的,那么我们首要的工作就是安装Node.js了。
2.1 进入Node.js中文网 http://nodejs.cn/
2.2 点击顶部【下载】按钮,按照你自己的系统版本,下载相应的安装包。如下图所示:
windows系统建议下载 .msi 文件,安装时会将Node.js安装好的目录写入环境变量。OSX没用过,所以不知道怎么安装(-__-!!! 穷人买不起苹果电脑)

node.js下载

2.3 安装Node.js,按照提示不停点Next就行了。如果要装在其他位置,请选择安装目录。

安装Node.js

2.4 下载安装好Node.js后,进入命令行(OSX是终端Terminal),windows进入命令行的快捷方式是 win+r,输入cmd并回车,进入命令行后,输入:node -v,并回车,如果能看到如下图所示的版本号,说明Node.js安装成功

node.js安装成功

3. 使用npm或cnpm安装gulp

3.1安装npm或cnpm
npm:全称 node package manager,是Node.js的包管理器,用于安装、卸载、更新Node的插件,管理依赖等。
因为我们下载的Node.js安装包自带npm,所以不需要额外安装,但是由于npm安装插件是从国外服务器下载,因此网络有时候可能会出现异常。所以这里建议安装cnpm。(网速好的可以继续使用npm)
cnpm官方网址https://npm.taobao.org/

通过npm命令行安装:npm install cnpm -g --registry=https://registry.npm.taobao.org

注意:安装完后最好查看其版本号 cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm

4. 安装gulp

4.1 打开命令行,进入你的项目目录,如下图,我的目录是在D盘workspace/xxx

进入项目目录

4.2 全局安装gulp,执行命令npm install gulp -g

全局安装gulp
WARN为警告,大概意思是说插件有更新,不影响正常使用。
安装成功后会出现gulp@x.x.x表示已成功安装的gulp版本。

4.3 初始化创建package.json文件 npm init
全局安装gulp

最后输入yes或y,Enter确定,就会在你的目录下面生成一个package.json文件,如下图:

生成的package.json文件

注意:package.json是一个普通的json文件,里面不能添加任何注释!里面不能添加任何注释!里面不能添加任何注释!

此外,有人的在初始化创建package.json文件的时候,可能不会出现入口文件 entry point,没关系,你可以等你的gulpfile.js主文件配置好之后再添加进去。

4.4 本地安装gulp插件

初始化创建好pageage.json文件后,还是进入你的项目目录,本题再安装一次gulp插件。
执行命令npm install gulp --save-dev,如下图:

本地安装gulp
PS:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

5. 安装你想使用的插件(以gulp-less为例)

以gulp-less(编译less文件)插件为例,首先我们要本地安装gulp-less插件。

进入项目目录后,执行命令:npm install gulp-less --save-dev

本地安装gulp-less

6. 新建gulpfile.js文件

gulpfile.js是项目的配置文件,一般位于项目的根目录,也可以放在其他地方。

6.1 用你的IDE在你项目的根目录下面创建一个gulpfile.js文件。
新建gulpfile.js

6.2 gulpfile.js文件的内容,你可以直接拷贝过去按照你的项目结构修改

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //引入gulp
    less = require('gulp-less');    //引入gulp-less插件
    //定义一个testLess任务(任务名称可以自定义)
gulp.task('testLess', function () {
    gulp.src('src/css/my.less') //该任务要处理的源文件
    .pipe(less()) //调用gulp-less插件的less()方法编译less
    .pipe(gulp.dest('dist/css')); //输出处理后的文件——将会在dist/css下生成my.css
});
gulp.task('default',['testLess']); //定义默认任务 elseTask为其他任务

6.3 把gulpfile.js文件添加到package.json中

添加入口文件

7. 运行gulp

7.1 在命令行进入项目的根目录,执行命令gulp default

运行gulp

如果出现上图红框里的内容,表示gulp任务运行成功。现在再去你的项目 dist/css下面看看,你会发现生成了一个css文件。

运行结果

去顶部