gulp简单安装和入门(适用刚接触gulp的同学)

Posted marspp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp简单安装和入门(适用刚接触gulp的同学)相关的知识,希望对你有一定的参考价值。

一、gulp

  1、gulp主要用来在前端开发过程中对代码进行自动化构建的工具,能大大提高前端开发效率。

  2、主要对js/sass/less/html/image/css等静态资源文件进行合并、压缩、格式化、浏览器自动刷新、部署文件生成、转换等操作。

二、安装流程

  1、安装nodejs(gulp是基于nodejs),直接打开nodejs官网,直接下载一个nodejs,打开根据提示正常安装即可。

   测试:命令行下(window+r  输入cmd弹出),输入node -v,npm -v,显示版本号表示安装成功。

    技术分享图片

 

  2、npm安装(用于node插件管理,包括安装、卸载、管理依赖等。这里就不展开讲解npm,需要的同学自行百度),由于该服务器在国外,下载速度慢,所以目前较常用的是基于淘宝的-淘宝npm镜像.。

   命令行输入:npm install cnpm -g --registry=https://registry.npm.taobao.org。

   测试 : 输入 cnpm -v ,显示版本号表示安装成功。(安装成功执行命令行 npm改为 gulpcnpm)

    技术分享图片

  3、全局安装gulp(用于执行gulp任务)

   命令行输入:cnpm install gulp -g

   测试 : 输入 gulp -v ,显示版本号表示安装成功。

  4、项目中安装gulp(调用gulp插件的功能),需先定位项目目录提示符后执行(定位文件夹命令行命名自行百度)。

   命令行输入:cnpm install --save-dev

  5、项目根目录下创建package.json文件(图中圈出部分为必填项,具体每个项的含义自行百度),改文件可手动配置,也可通过命令行调用配置  

   命令行:cnpm init

  技术分享图片技术分享图片

 

  6、项目根目录下创建gulpfile.js文件(用于配置需要执行的任务),配置信息查看-构建配置

三、基本使用:

  通过以上安装配置,gulp的环境基本搭建起来了,接下来简单介绍下如何使用。这里以.less 文件转换成 .css文件为例。

  1、首先先下载插件,在项目目录命令行下输入:cnpm install gulp-less --save-dev ,下载完成可在项目下的node_modules文件夹中找到下载的插件技术分享图片

  2、在gulpfile.js文件中配置要操作的相关配置(具体更多配置可查看-构建配置)

  技术分享图片

 

  3、在项目目录命令行下输入:gulp less。执行成功在相关目录下生成需要的文件。

   技术分享图片

  技术分享图片

 

以上是关于gulp简单安装和入门(适用刚接触gulp的同学)的主要内容,如果未能解决你的问题,请参考以下文章

gulp入门

gulp快速入门

gulp安装+一个超简单入门小demo

glup 入门

前端自动化构建工具Gulp简单入门

gulp入门教程