gulp使用

Gulp使用教程

一、简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

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

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。 

二、安装nodejs

2.1、说明：gulp是基于nodejs，理所当然需要安装nodejs；

2.2、安装：打开nodejs官网（https://nodejs.org/en/），点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。

注：安装完成之后注意将其配置到环境变量（系统变量path中），这样你就可以在全局范围内去使用它了

2.3测试：按window + r 输入cmd回车，然后输入node -v  然后输入npm -v  如果都能打印出相应版本信息，那么说明你配置成功了

三、选装cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。

网址：http://npm.taobao.org  

(1)安装：命令提示符执行

npm install cnpm -g --registry=https://registry.npm.taobao.org；  

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

将路径npm下bin文件的路径（一般在c盘中的Roaming中）配置到环境变量中，这样就可以在全局范围内使用cnpm命令了

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。

四、全局安装gulp

(2)在cmd中执行

　　　　npm install gulp -g

　　　　cnpm install gulp -g

(2)查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装   注意配置环境变量

五、新建package.json文件

进入自己需要的一个文件夹中

cd (你项目的路径)

创建package.json文件

　　npm init    

　　cnpm init

 一直enter就可以 

在项目目录下会形成这样的一个.json文件（部分内容为后添加的）

 1 {
 2 
 3   "name": "gulptest",//项目名称（必须）
 4 
 5   "version": "0.0.1",//项目版本（必须）
 6 
 7   "description": "这是一个gulp的测试程序",//项目描述（必须）
 8 
 9   "homepage": "",   //项目主页
10 
11   "main": "index.js",//入口文件
12 
13   "scripts": {
14 
15     "test": "echo \"Error: no test specified\" && exit 1"
16 
17   },
18 
19   "keywords": [//关键词
20 
21     "gulp"
22 
23   ],
24 
25   "author": "",//作者
26 
27   "license": "ISC"//项目许可协议
28 
29 "devDependencies": {    //项目依赖的插件
30 
31     "gulp": "^3.8.11"
32 
33   }
34 
35  
36 
37 }
38 
39

 

查看package.json帮助文档，命令提示符执行cnpm help package.json

六、本地安装gulp插件

安装：定位目录命令后提示符执行cnpm install gulp --save-dev；

七、创建文件

在目录中创建src文件夹，在该文件夹中创建初始前的项目文件

然后在你的项目的根目录下创建一个gulpfile.js文件

在该文件中写入

外挂列表

  1. 编译Sass (gulp-ruby-sass)
  2. Autoprefixer (gulp-autoprefixer)
  3. 缩小化(minify)CSS (gulp-minify-css)
  4. JSHint (gulp-jshint) 代码检查
  5. 拼接 (gulp-concat)
  6. 丑化(Uglify) (gulp-uglify)
  7. 图片压缩 (gulp-imagemin)
  8. 即时重整(LiveReload) (gulp-livereload)
  9. 清理档案 (gulp-clean)
  10. 图片快取，只有更改过得图片会进行压缩 (gulp-cache)
  11. 更动通知 (gulp-notify)
  12. 注意：gulp（编译） 或者gulp transCss压缩执行的命令

 

posted @ 2016-07-12 10:43  凉城丶旧梦  阅读(262)  评论(2)  编辑  收藏  举报