相信大家一定听说过gulp或者webpack,grunt等前端构建工具。gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。 它能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了请不要喷我,毕竟我也是一个菜鸟。写下这篇笔记,不是为了证明什么,就是方便我以后忘了时候回顾看一下。好,废话不多说 下面开始了
1、node环境搭建
想要使用gulp,首先你得在你得电脑里面安装node.js,因为gulp是基于Nodejs的自动任务运行器。这个我就不详细介绍怎么安装了吧,网上教程一搜一大把。相信正在使用gulp的朋友,也知道怎么安装node.js
2、使用命令行工具
开发的环境安装好了以后,接下来就是通过命令行来下载相应开发的模块包。什么是命令行?命令行在OSX是终端(Terminal),在windows是命令提示符(Command Prompt)windows系统下 WIN+R打开命令行工具,在里面输入cmd,回车。如下图:
3、选装cnpm(淘宝镜像)
因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常.
3.1、官方网址:http://npm.taobao.org;
3.2、安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
; 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重写打开,安装完直接使用有可能会出现错误;
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。
4、全局安装gulp
4.1、说明:全局安装gulp目的是为了通过她执行gulp任务;
4.2、安装:命令提示符执行
1 |
|
4.3、查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。
4.4、依赖安装: npm install gulp --save-dev,这个可以在你的当前的项目目录下,打开命令行工具进行依赖安装。下面我们会在介绍packge.json文件当中介绍为什么需要依赖安装
5、新建package.json文件
5.1、package.json文件是基于node.js项目必不可少的配置文件,它是存放在项目根目录的普通json文件,里面有你各个依赖安装模块插件的版本信息,以至于你能清楚看到你安装了那些模块。如下图我安装很多模块以后的json文件。
5.2、配置packge.json文件
1 |
|
注意:初始化packge.json文件必须在你项目的根目录下打开命令行工具,执行初始化代码。(怎么在当前目录下打开命令行工具?shift+右键。当然,win10系统的命令行工具被微软改版了,叫Powershell,作用还是一样)
6、新建gulpfile.js文件
既然我们要使用gulp,我们就需要建立一个gulpfile.js文件,gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件。gulp的开发代码都写在这个里面的
js代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
|
7、运行gulp
7.1、说明:命令提示符执行gulp 任务名称;
7.2、编译less:命令提示符执行gulp testLess;
7.3、当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]
8、使用webstorm运行gulp任务
9、使用vscode运行gulp任务
vcode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。
在vscode上我们想要简单的运行gulp任务,我们可以下载一款名为“Gulp Tasks ”的插件。安装好插件以后,我们将项目文件添加到工作区当中,然后打开gulpfile.js文件。
在左下角我们可以启动任务
10、总结:
10.1、安装nodejs;
10.2、新建package.json文件;
10.3、全局和本地依赖安装gulp;
10.4、安装gulp插件;
10.5、新建gulpfile.js文件;
10.6、通过命令提示符或者开发工具运行gulp任务。