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中），这样你就可以在全局范围内去使用它了

我的路径是在c:\Program Files\nodejs\node_modules\npm\bin，记得把它也配置进去

如果想了解环境变量：进入以下地址：
https://blog.csdn.net/jiang7701037/article/details/80707786

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

2.4 npm的解释：
npm是Node.js的包管理工具（package manager）。
在Node.js上开发时，会用到很多别人写的JavaScript代码。如果需要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。
npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v

⦁    必装cnpm
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
网址：http://npm.taobao.org  
安装：
cmd(命令行)执行
npm install cnpm -g --registry=https://registry.npm.taobao.org  

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
将路径C:\Users\asus\AppData\Roaming\npm\node_modules\cnpm配置到环境变量中，这样就可以在全局范围内使用cnpm命令了

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。
⦁    全局安装gulp
在cmd(命令行)中执行 cnpm install gulp -g

查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装

注意配置环境变量（C:\Users\asus\AppData\Roaming\npm\gulp）

全局安装gulp的目的是：可以使用gulp命令（就跟使用npm的命令一样）

⦁    新建package.json文件(初始化一个项目)
1、进入项目的目录,如：cd F:\workspace\gulpdemo  （这是项目目录）

2、创建package.json文件
         在cmd(命令行)执行：cnpm init， 一路回车，就会在项目的文件夹下产生一个package.json文件
 
在路径下会形成这样的一个.json文件（部分内容为后添加的）
{
  "name": "gulptest",//项目名称（必须）不能有大写
  "version": "0.0.1",//项目版本（必须）
  "description": "这是一个gulp的测试程序",//项目描述（必须）
"homepage": "",   //项目主页
  "main": "index.js",//入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [//关键词
    "gulp"
  ],
  "author": "wuxunxun007",//作者
  "license": "ISC"//项目许可协议
"devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }

}
查看package.json帮助文档，命令提示符执行cnpm help package.json
⦁    本地安装gulp(在项目目录下安装gulp)：
此步骤的目的是：把gulp里的所有的js文件从服务器上下载到项目目录下（node_modules）

  1）、把当前目录转到项目目录：cd  项目目录，或者在项目目录下，按住shift键，同时点击鼠标右键，选择“在此处打开命令行”
  2）、在cmd(命令行)执行：cnpm install gulp --save-dev

安装完成后，就会在项目目录下产生一个node_modules文件
⦁    使用gulp。
必须在项目的根目录先建立 gulpfile.js文件。在这个js文件中写上js代码，就可以使用。
如下会有：复制文件的功能，那么就写出个复制文件功能的任务。
⦁    复制文件
1.1复制页面
⦁    在根目录下创建一个index.html写一点内容，
 
⦁    在gulpfile.js写入下代码：
var gulp = require("gulp");

gulp.task("copy-html",function(){
    //gulp.src("index.html").pipe(gulp.dest("dist"));
    gulp.src("index.html")
    .pipe(gulp.dest("D:\\phpStudy\\WWW\\web180506\\day33"));
});

⦁    在命令行末执行gulp  copy-html  那么我们就会在D:\\phpStudy\\WWW\\web180506\\day33目录下面发现index.html文件，说明复制成功

注：
要复制项目的所有文件和文件夹（包括子文件夹，不管有多少级）有两种
1)    “./**/*”  当前路径用 “.”表示
2)    “*/**/*”
3)     “css/**/*”  把css文件夹下的所有的内容（包括子文件夹，不管有多少级）
gulp.task('copyallfile',function(){
    gulp.src('*/**/*')
    .pipe(gulp.dest('D:\\phpStudy\\WWW\\day32test'));
});

1.2 拷贝图片文件images
 
修改gulpfile.js
复制imges文件加下的所有jpg文件
 
执行命令 gulp images
在dist/images下有这样三个文件
 
复制images文件加下的所有jpg和png文件
 
执行命令
 

复制images文件加下的所有文件
 
执行命令
 

1.3 同时拷贝两个文件夹,拷贝到dist文件夹下的data中
 
修改gulpfile.js
 
执行命令gulp data
 

1.4 拷贝文件时过滤文件,在json文件中新建一个json为test.json， 
然后修改gulpfile.js
 
请手工删除dist/data文件下的文件
 
执行命令
 
我们发现，并没有把test.json拷贝进来

1.5如何将以上命令一次性执行，采用bulid命令
 
执行命令
 
 

⦁    本地安装gulp插件
gulp本身只做一些文件的拷贝，监视等等，但是它提供了很多的接口，由插件完成更多对应的任务，如：sass文件的编译，合并文件，压缩文件，优化图片的尺寸，创建本地的开发服务器。下面先介绍常用的，更多的可以找gulp的插件。

2.1 合并文件
安装命令 cnpm install gulp-concat --save-dev

修改gulpfile.js
 
执行命令 gulp scripts
 

2.2 合并并且压缩
先安装uglify插件
cnpm install gulp-uglify --save-dev

  

2.3 合并并且压缩,重新起名字
先安装插件rename
 cnpm install gulp-rename --save-dev

 
 

2.4 压缩css
先安装插件：
 cnpm install gulp-minify-css --save-dev

 
 
重新起名字：

 

2.5 压缩图片
先安装插件 imagemin
cnpm install gulp-imagemin --save-dev
  

Pipe就是管道
解释：gulp.src()  是读取将要处理的文件，即源文件
      pipe() 管道，是如何处理该文件（如：sass编译，复制文件，压缩文件等）。
      gulp.dest()  是处理后的文件的路径，即目的文件。

编译sass文件
输入命令：cnpm install gulp-sass --save-dev
 安装sass插件， --save-dev表示安装到开发依赖里。
 
安装完成之后使用即可
创建一个main.scss
  
修改gulpfile.js

 
执行命令gulp sass
  

2.6 启动服务（web服务器）
安装插件 cnpm install gulp-connect --save-dev
 
修改gulpfile.js
 
执行命令 gulp server
 
打开浏览器输入
http://localhost:8080/，可以查看到

 

如果需要实时更新数据，那么需要添加一个参数livereload:true

 

执行gulp命令
然后修改index.html那么会自动更新

2.7实时监测文件的更新

⦁    新建一个任务watch
Gulpfile.js
 
执行命令 gulp watch
 
除非手动关闭，否则一直更新
修改index.html
 
打开dist文件下的index.html
 
点击是
 

Pipe：是管道的意思，pipe的参数如果写的是一个（命令）相当于生活中的在管道里增加一个过滤器过滤纯净水一样的道理

常见问题：
⦁    如果出现了cannot find module  ’***’,表示该模块没有安装成功，解决：执行cnpm install gulp ‘***’ --save-dev，就可以单独安装该模块。
如： 

表示，模块glob-watcher没有安装成功。执行以下命令：
cnpm install gulp glob-watcher --save-dev。如下图：
 

十一：正在进行的项目如何用gulp:
⦁    新建空文件夹作为项目的文件夹
⦁    用npm初始化项目：用npm init命令产生package.json文件
⦁    本地安装gulp
⦁    把项目目前的所有文件拷贝的到新建的项目文件夹里
⦁    在项目根目录下写gulpfile.js的代码。