gulp的安装和使用

gulp

Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。
官网：https://gulpjs.com/

gulp的安装

gulp是基于node.js的工具，所以我们在安装的时候是使用 npm 安装，(npm是随同NodeJS一起安装的包管理工具)
gulp安装分两步：

1. gulp要先在全局安装。在命令行输入：
   npm install gulp -g -g是全局安装
2. 要在项目中使用gulp,还要在局部安装（在你要操作的项目的跟目录安装）
   npm install gulp -save-dev --save是运行环境，–save-dev是开发环境
3. 安装成功后会在你项目目录里生成两个文件
   • node-module 这个文件夹不能直接删除，要删除的的话要使用

      rimraf node_modules
     

     使用 rimraf 要先安装

     cnpm install rimraf -g
     

   • package-lock.json 这个文件可以选择忽视

gulp的使用

1. 在使用gulp的时候要先初始化

   npm init 
   

   初始化要让你确定一些信息，你可以选择全部选择确定（按enter就行）
   也可以直接使用

   npm  init -y
   

   可以省略确认过程
   安装完成，项目根目录会生成一个文件package.json
   package.json 中是你配置的环境
2. 在根目录创建文件gilpfile.js
3. 编辑gilpfile.js文件
   • 引入gulp： require(“gulp”)
   • 创建任务：gulp.task(“任务名”,function(){})
   • gulp自带的方法： gulp.src, gulp.pipe, gulp.dest
     • gulp.src(“路径”)任务开始文件路径
     • gulp.pipe()任务流
     • gulp.dest(‘路径’)任务结束存放结果的路径

gulp插件

1. 常用插件

   gulp-imagemin  //图片压缩
   gulp-cssmin //压缩css
   gulp-htmlmin //压缩html
   gulp-uglify //压缩JS
   gulp-concat //合并JS
   gulp-renamr //重命名
   gulp-watch //监听
   gulp.spritesmith  //图片合并，组成精灵图
   

2. 插件的安装
   插件的安装都是局部安装，分为–save 和–save-dev
   • –save

     npm install '插件名' --save
     

     这个安装的插件是运行环境插件，就是程序在运行时需要的插件。
     安装完成，可以在package.json文件中，dependencies中查看
   • –save-dev

     npm install '插件名' --save-dev
     

     这个安装的插件是开发运行环境插件，就是程序在开发时需要的插件。
     安装完成，可以在package.json文件中，devDependencies中查看

插件的使用

1. 查询插件：在下面的网站查询
   官网：https://www.npmjs.com/
   点开网址，搜索框内搜素要使用的插件名，找到，点击进入
2. 复制格式，放入gulpfile.js文件中
3. 修改参数，gulp.src 要执行的文件路径，gulp.dest任务结束存放结果的路径.
4. 在终端，使用 gulp 任务名 调用