10分钟入门gulp及gulp插件的使用和package.json文件的作用

gulp：

• gulp是一个基于node开发的前端构建工具，短小精悍，适合中小型项目辅助，它可以将一系列机械化操作编写成任务，然后在命令行执行这个任务就可以了
• 一般用来做什么：
  • 项目上线，html、css、js文件压缩合并
  • 语法转换：es6、less
  • 公共文件抽离
  • 修改文件后自动刷新浏览器
  • 等等…
• 使用：
  • 安装：npm i gulp，库形式的模块，提供API

    • gulp.src：获取要处理的文件

    • gulp.dest：输出文件，会自动生成目录结构（没有通配符的不会）

    • gulp.task：定义任务（已过时，目前最新版本直接通过函数定义，用module.exports对象导出即可，导出的名字就是任务名，已导出的叫公开任务，可以直接在命令行中被gulp命令调用，没有导出的叫私有任务，不能直接在命令行中被gulp命令调用）如下范例：
      gulp.task(‘taskName’, () => {}) // 旧版本

      // 新版本
      function taskName (done) {
        // your code...
        done() // 这个done方法是一个回调函数，用来通知gulp该任务已经完成了，因为有可能存在异步操作
        // done(new Error('错误消息')) // 可以通过这种方式提示错误
      }
      module.exports = { taskName }
      

    • gulp.watch：监听文件变化

    • pipe方法：管道方法，用来将上一个方法的处理结果传递给下一个方法进行处理

  • 在项目根目录下创建gulpfile.js文件，注意：路径和文件名不要改
  • 重构项目目录结构，将源代码放到src文件夹中，创建一个dist（这个名字是业内约定俗成）目录，用于存放构建后的代码
  • 在gulpfile.js文件中编写你的gulp任务
  • 在命令行中通过gulp 任务名，执行gulp任务（需要借助gulp的命令行形式的模块gulp-cli）