• gulp入门小记


        由于我所在的项目组一直在用gulp构建工具,而我只是在前人搭好的环境下每次运行gulp packJs来打包js,对里面的东西全然不知,刚好最近有些时间就想自己从学学将gulp怎么用于构建前端项目中,这样也会对这个构建工具有一些深刻的理解。

        首先,gulp是什么?gulp是基于nodejs的自动任务运行器,能自动地完成html js css sass image等文件的的检查、合并、压缩、浏览器自动刷新、部署文件生成,在实现上,借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,输入输出是基于流式的。gulp不需要复杂的配置文件(所以构建脚本是代码而不是配置文件),都是使用标准库(node.js standard library)来编写脚本;插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;任务都以最大的并发数来执行。

        其次,安装和使用,网上有好多安装教程这里就简单说下。第一,node是环境需要,所以应首先安装;第二,全局安装gulp(npm install -g gulp)再在项目下局部安装gulp(npm install -save--dev gulp);第三,在项目目录下面新建基于nodejs不可少的package.json(也可以用命令行npm init)和gulp的配置文件gulpfile.js。然后需要什么插件安装后在gulpfile.js里面require一下操作就行。

        最后,说说gulp最常用的api函数(下面只写一个大概,具体还需亲自去看api文档):

    ① gulp.task(name[, deps], fn):name是任务名称,deps是可选的数组(该任务依赖的任务),fn是调用插件操作;

    ② gulp.src(globs[, options]):指明处理的源文件路径,options是可选的,返回当前流至可用插件。

    ③ gulp.dest(path[, options]):指明处理后的输出路径;

    ④ gulp.watch(glob[, options], tasks) / gulp.watch(glob[, options, cb]):监视文件的变化并运行相应的任务。

         最后最后再说一个自己搭建过程中遇到的一个小问题,就是用http-server和livereload在我的电脑上始终没起作用,后来换了一种方式改用gulp-connect就可以实现浏览器自动刷新了。后来还试了一下基本的js css压缩插件 也都没有问题,以后再慢慢深入吧。总体感觉gulp还是挺简洁使用的。 

  • 相关阅读:
    在centos7.4上安装confluence-6.7.1
    用rpm包在centos7.4上安装mysql-5.7.29-1.el7.x86_64
    Linux系统运维笔记,CentOS 7.4防火墙配置
    Linux系统运维笔记(6),CentOS 7.6双网卡路由配置
    Linux系统运维笔记(五),CentOS 6.4安装java程序
    Java 构造 BSON 数据类型
    Linux系统运维笔记(四),CentOS 6.4安装 MongoDB
    设计模式(5)原型模式(Prototype)
    设计模式(4)建造者模式/生成器模式(Builder)
    设计模式(3)抽象工厂模式(Abstract Factory)
  • 原文地址:https://www.cnblogs.com/colima/p/5401346.html
Copyright © 2020-2023  润新知