阿牛博客

简单易懂的gulp安装、使用教程

gulp,很好用的前端自动化构建工具,无数的插件让我们不管是编译less、sass,压缩css、js、图片还是合并seajs、requirejs等等都非常方便,强烈推荐使用!下面为大家介绍一下glup简单的安装使用教程:

1.下载安装node.js

下载地址:https://nodejs.org/en/,这个安装很简单,直接下载自己系统类型的相应版本,双击安装即可。
gulp是基于node的,所以需要安装它,安装后,检测一下是否安装成功:
检测node安装是否成功cmd命令: node -v (出现版本号表示成功,如果安装正常,但没有出现版本号 尝试注销系统)
检测npm安装是否成功 npm -v (出现版本号表示成功,关于npm,下面介绍)

2.npm

npm即包管理器,安装node就会出现这个,然后我们用这个安装gulp及gulp相应的插件;
这里推荐一个淘宝自己搞出来的一个东西:cnpm,服务器在中国,所以安装gulp及插件的时候用它;
安装cpm方法很简单直接cmd命令:npm install -g cnpm –registry=https://registry.npm.taobao.org (详细了解请戳这 >>

3.全局安装 gulp

nmp install gulp -g (全局安装gulp)
gulp -v(检测是否安装正确)

4.进入项目目录建立package.json文件

cmd命令:npm init
按提示输入 name(项目名) version(版本号)… 此步骤可以按回车键省略 package.json可以修改
操作截图:

(Tip:图片点击可放大,适合移动端浏览)
安装之后的目录级json文件:

(Tip:图片点击可放大,适合移动浏览)

5.项目里面安装gulp及自己开发所需的gulp插件

运行cmd命令:npm install gulp –save-dev (安装插件输入–save-dev即保存在开发模式下 方便以后重用,这里我们创建的json文件是很有用的,它可以随便拷到其他项目去,然后运行cmd命令:npm install会自动帮我们安装json中devDependencies下的所以插件,省敲好多安装代码)
当然,也可以多插件安装:如:npm install gulp gulp-less gulp-make-css-url-version gulp-minify-css –save-dev
操作截图:

(Tip:图片点击可放大,适合移动端浏览)
安装成功后的目录及json文件截图:

(Tip:图片点击可放大,适合移动端浏览)

6.在根目录下面建立gulp配置文件:gulpfile.js

下面以编译less为例–
测试代码截图及代码解析:

(Tip:图片点击可放大,适合移动端浏览)
执行gulpfile里面的任务:
cmd命令:gulp less (gulp+任务名称)
操作截图:

(Tip:图片点击可放大,适合移动浏览)
编译后的样子及最后的文件目录:

(Tip:图片点击可放大,适合移动浏览)

好了,教程暂时告一段落,关于gulpfile文件的相关函数及gulp的一些其他应用技巧,我会在后面出一个详细的教程,大家敬请期待~

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/261

上一篇: 轮播展示插件 » 下一篇: 焦点图小插件-可兼容pc和手机端 »