gulp自动化构建工具的使用

Posted 2021-10-23 nanxiaoge

gulp自动化构建工具：

　　把前端开发常见的处理（“搬砖”）程序，通过一个工具模块管理起来，只需配置一次，达到自动处理目的，简化开发，提高效率!！

 

安装：

　1.全局安装(全局安装一个gulp命令)

　　A.下载安装：

　　cnpm：cnpm i gulp -g

　　如果cnpm安装有问题：可使用yarn安装

　　yarn:   yarn global add gulp

　　B.测试

　　gulp -v

 

     2.本地安装（引入依赖模块，支持不同版本的项目运行）

　　A.安装

　　　a.创建一个新文件夹，初始化package.json

　　　　cnpm:  cnpm init -y

　　　　yarn:  yarn init -y 

　　　b.安装本地gulp

　　　　cnpm:  cnpm i gulp -D(安装开发依赖：全称：--save-dev)　

　　　　yarn:  yarn add gulp -D

　　　c.配置：

• •  创建一个gulpfile.js文件，与package.json同目录
  • 引入gulp核心模块

    1 var gulp =require(‘gulp‘);

     

  • 配置gulp任务 ：语法：gulp.task(name[, deps], fn)

    • 参数：
      name 任务名称
      deps 可选，包含任务列表的数组
      fn 回调函数，任务执行的代码

      1 var gulp = require(‘gulp‘);
      2  
      3 gulp.task(‘default‘, function() {
      4     console.log("测试");   
      5 });

　　　　　　

• • 　　执行任务
    • 　　gulp 任务名称  或者  gulp 任务名称是default就可以省略

      1 gulp myTask（任务名）

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下一篇将介绍gulp常用插件的使用