gulp

1.npm -Node的包管理工具

node package manager
npm官网
淘宝镜像
cnpm

2.安装 node

下载node的安装包，直接安装

验证是否安装成功

1 使用win + r键，打开运行窗口
2 输入cmd，敲回车，进入到命令行工具
3 输入node -v，检测node是否安装成功

4 输入npm -v，检测 npm

gulp 是基于node，所以，使用gulp之前，首先需要将node安装好
然后，在通过 node 安装 gulp！
npm： node package manager node的包管理工具
我们直接可以通过 npm 来下载或更新各种项目中要使用的包文件

初始化

1 先使用 npm 进行初始化
npm init    一路回车到底，
2 初始化好以后，在目录中会创建一个 package.json 的文件
3 在通过命名来下载文件
npm install jquery
npm install bootstrap

基本安装步骤

gulp的基本安装步骤：
1 通过 npm install -global gulp 进行全局安装  这是相当于安装在系统的目录当中，全局都可以使用
	全局安装的命令执行一次即可！
2 在本地安装 gulp   本地安装的只能在当前这个项目当中使用
	npm install -save gulp
3 就可以在本地使用 gulp 了！
4.使用gulp -v 命令查看当前gulp是否安装成功

3.下载包

命令：npm install [名称] --save
参数--save 会修改 package.json，添加”dependencies”依赖项
注意：会在当前目录中添加一个名为node_modules的文件夹
- 文件夹中存放了，所有下载的包文件
下载指定版本号的包：npm install [包名称]@版本号 --save

4.Gulp 前端自动化构建工具

概述

Gulp：用自动化构建工具增强你的工作流程！

1 易于使用
2 高效，利用node.js强大的流（文件流），快速完成构建
3 构建工作就像一系列流管道（水流经过管道）

应用场景

项目发布上线之前对项目进行构建
自动完成一系列重复的操作

1	js、css、html文件的压缩、混淆、合并、监视文件变化、同步刷新浏览器等等

安装Gulp命令行

1 全局安装 gulp
- npm install --global gulp
2 作为项目的开发依赖（devDependencies）安装：
- npm install --save-dev gulp

和node联合安装

1 安装node
2 将 npm 的默认仓库设置为 淘宝的仓库（执行一次即可）
      npm config set registry https://registry.npm.taobao.org --global
      npm config set disturl https://npm.taobao.org/dist --global
3 npm isntall gulp --global 全局安装gulp（执行一次即可）
 4 在本地使用gulp 需要在本地重新安装
      	 注意：项目的文件夹名称不要叫：gulp
5 npm init 初始一个 package.json 文件
 6 npm install --save-dev gulp 在本地安装gulp
      	 只对当前文件夹起作用
      如果换了一个新的文件夹，那么 第5、6步需要重新执行
      安装 gulp 的时候，也是可以不用初始化的，也就是说直接将 5、6 步
      简化为： npm install gulp

其他构建工具

Grunt 、webpack

核心方法

task() ：gulp中是以任务为单位来实现功能
src() ：传入路径参数，获取到要处理的指定文件
dest() ：指定处理后的文件输出路径
watch()：监视文件的变化，做出相应的处理

说明

gulp是以任务的形式来做自动化构建工作.
       每一个工作就是一个任务
       要做一个工作 我们就要先创建对应的任务.
       任务创建好了之后 再去执行这个任务.

写任务的步骤

注意：任务写在 gulpfile.js 文件中，这个文件需要我们自己创建

//1. 引入gulp文件
var gulp = require('gulp');
//2. 创建一个任务    所有的任务都要使用task方法来创建
gulp.task('test',function (){
    console.log('开始执行了...');
});
// 3 在cmd命令行中执行命令： `gulp test` 命令

使用gulp的插件

gulp-less：将less转化为css
gulp-uglify：压缩和混淆js代码
gulp-concat：合并js/css文件
gulp-cssmin：压缩css代码
gulp-htmlmin：压缩html代码
gulp-imagemin:压缩图片
- htmlmin文档
browser-sync：同步刷新浏览器
以上插件都使用：npm install gulp-[名称] --save-dev 安装

网络不好的情况下，最好是一个个安装，否则，很可能会下载失败

1 2	npm install --save-dev gulp gulp-uglify gulp-concat gulp-cssnano gulp-htmlmin gulp-less npm install --save-dev browser-sync

```

5.压缩代码

//3. 压缩代码  gulp本身没有压缩的功能，需要添加插件
gulp.task('yscss',function (){
     //压缩css的代码
    gulp.src('./views/public/less/index.css')
      .pipe(cssmin())
      .pipe(gulp.dest('./dist'));
})

6.文件监视

//4. 文件的监视  监视文件的变化，一旦变化，就可以执行指定的任务
gulp.task('watchcss',function (){
  // watch 监视文件的名称，任务名称是放在数组里，也就意味着可以执行多个任务
  gulp.watch('./views/public/less/index.css',['yscss']);
})

7.压缩js

先下载模块:  npm install gulp-uglify --save
//5.压缩js
gulp.task('ysjs',function (){
  //压缩css的代码
  gulp.src('./views/public/js/teacher/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/teacher'));
})

8.压缩html

先安装压缩的模块： npm install gulp-htmlmin --save    注意要配置参数
//6. 压缩html
gulp.task('yshtml',function (){
  //压缩css的代码
  gulp.src('./views/course/*.html')
    .pipe(htmlmin({
      removeComments: true,//清除HTML注释
      collapseWhitespace: true//压缩HTML
    }))
    .pipe(gulp.dest('./dist/course'));
})

9.某些文件的排除

gulp.task('ysjs1',function (){
  //压缩css的代码
  gulp.src(['./views/public/js/course/*.js','!./views/public/js/course/lesson.js'])
    .pipe(uglify())
    .pipe(gulp.dest('./dist/courses'));
})

其它

参考文章

单独使用 browser-sync

作用：更改代码之后自动刷新浏览器

安装

命令：npm install browser-sync -g 全局安装

监视

命令：browser-sync start --server --files "index.html"
监视单个文件：--files "index.html"
监视多个文件：--files "index.html, test.css"
监视目录文件：--files "./css/*.css"
监视所有文件：--files "*.*"

优势

动态重新加载样式文件，而不是刷新页面，避免繁琐的操作
前提：样式放到一个单独的css文件中

其他应用

管理地址：UI: http://localhost:3001
多浏览器同步测试

1 同步事件触发
2 同步浏览器滚动
3 同步文本框内容