zoukankan      html  css  js  c++  java
  • 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结

    博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧。

    谈到gulp,有人可能就会想到另外一个构建工具grunt,那么 博主就要夸你一句:油啊热瘪死他。

    那么grunt和gulp有什么异同点呢?

    1.易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。
    2.高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
    3.高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
    4.易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道
    5.易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件。高质量 Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。易学 Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。

    如何使用gulp配置自己的项目

    要想在项目中使用gulp,就要全局安装gulp,执行命令如下
    npm install gulp -g 其中-g表示全局安装(node自己安装就可)
    

    这样就算是在计算机上安装了全局gulp 也就意味着可以使用gulp中的模块了

    下面跟我一起学习在项目中如何使用吧

    开车了 快点上车 。。嘟嘟嘟

    新建文件夹managers,maneger下面新建两个文件夹dist和src,一个表示源头,一个表示输出,然后通过git bash工具 在manager文件夹下执行命令
    npm init (用于生成package.json文件)
    

    执行结果如下

    执行图
    一路回车就行,最终得到的目录如下
    目录

    然后就开始安装需要用到的插件,这里我做几个重要的说明一下,其他插件可以自己去摸索.

    npm install gulp--save-dev(save-dev指的是把gulp配置到本项目的package.json文件下,因为你要使用人家的插件嘛 肯定需要它来指挥)
    npm install gulp-uglify --save-dev(这个插件是用来压缩js的)
    npm install gulp-ruby-sass --save-dev(这个是用来编译sass的)
    npm install gulp-notify --save-dev(这个是提醒插件)
    
    安装这三个插件,安装完成后你的package.json文件应该是这样的(不是这样的扇博主的face)

    目录

    显而易见你在devDependdencies中看到了你安装的四个插件,现在就让我们来使用它们吧

    首先,学会压缩js,在src文件夹下新建文件夹js以及gulpfile.js,并在js文件夹下新建文件index.js

    下面重点来了,就是如何去自己写任务文件(gulpfile.js)

    首先,在这里给大家简单说一下gulp重要的4个api
    gulp.src()表示文件的来源 或者说是读取文件
    gulp.dest()表示文件的输出 也就是输出文件
    gulp.task()表示要执行的任务
    gulp.watch()表示要监听的任务
    
    具体的api请狠狠点击这里,不要留情面gulp

    下面开始跟着我一起写任务吧

    首先要引入需要的插件然后给gulp布置任务:如下:

    目录

    然后你在git bash 上输入

    gulp uglify(这个命令就是告诉gulp执行uglify任务,即:gulp+任务名字)
    
    最后你会看到这么一个喜庆的画面

    目录

    接着你会看到在你的dist文件夹下新生成了js文件夹 里面有个index.js这个index.js就是压缩过后的。
    然后或许有人会问了,那么如果我的js文件变动了,它会不会监听到呢?
    这个问题问的相当有水平,很好,遇到这样提问的程序员,应该鼓励一下,(鼓励师如花何在)
    在gulp你可以通过watch来监听js的改变,如下:

    执行 gulp watch()
    

    如下:

    这个时候你去修改index.js文件 你会发现如下图示:

    这是为什么呢?哦 原来是这样啊,当你改变你的js文件时候,gulp监听到了文件的改变,它就会去执行一次uglify任务,也就是你改一次它压缩一次。(突然想到了亚索 好久没lol了)

    是不是很有意思啊,我在写一个关于sass的任务,希望大家能够理解哈




    注意(sass基于ruby,所以大家还要去安装ruby,不会的可以自行百度)
    到此,我相信大家对gulp有个简单的认识了,也想跃跃欲试了,其实gulp还有很多插件,比如gulp-imagemin,gulp-rev,gulp-rev-collector,gulp-clean等需要大家慢慢去研究。

    在追求卓越的道路上,就是要不断的努力和总结,大家有啥疑问可以加群 474471759,找博主谈人生 谈理想。

  • 相关阅读:
    [PHP] 小数转科学计数法, 小数保留 n 位
    [Blockchain] Cosmos Starport 101
    [Blockchain] Cosmos Starport 地址前缀的变更方式
    [Blockchain] Cosmos Starport 安装的三种方式
    [ML] 机器学习的 7 步走
    [FAQ] MEMORY ALLOC FAILED: mmap with HUGETLB failed, attempting without it (you should fix your kernel)
    [FAQ] FastAdmin epay 微信公众号支付 JSAPI 支付必须传 openid ?
    [TP5] 动态绑定指定默认模块, 解决: 控制器不存在:appindexcontrollerApi
    [TP5] ThinkPHP 默认模块和单模块的设置方式
    [TP5] 浅谈 ThinkPHP 的 Hook 行为事件及监听执行
  • 原文地址:https://www.cnblogs.com/dreamsboy/p/6021247.html
Copyright © 2011-2022 走看看