码迷,mamicode.com
首页 > 其他好文 > 详细

gulp自动化构建工具的使用

时间:2019-04-25 01:03:04      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:前端   npm   安装   函数   default   require   lob   支持   测试   

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常用插件的使用

    

    

 

gulp自动化构建工具的使用

标签:前端   npm   安装   函数   default   require   lob   支持   测试   

原文地址:https://www.cnblogs.com/nanxiaoge/p/10765705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!