zoukankan      html  css  js  c++  java
  • 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还是挺简洁使用的。 

  • 相关阅读:
    Windows 8将替换Win32 API
    密码强度检测:passwordStrength
    整数溢出与程序安全
    编程经验谈:如何正确使用内存
    C/C++指针学习的两个经典实例
    VC调试入门
    一些电子书籍的网站
    BMP文件格式分析(zz)
    C/C++ 跨平台I/O操作技巧
    Windows下C语言网络编程快速入门
  • 原文地址:https://www.cnblogs.com/colima/p/5401346.html
Copyright © 2011-2022 走看看