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,找博主谈人生 谈理想。

  • 相关阅读:
    Oracle SQL语句收集
    SqlParameter In 查询
    SQL 性能优化
    Entity Framework
    【XLL API 函数】 xlfSetName
    【XLL API 函数】xlfUnregister (Form 2)
    【XLL API 函数】xlfUnregister (Form 1)
    【Excel 4.0 函数】REGISTER 的两种形式以及VBA等效语句
    【Excel 4.0 函数】REGISTER
    【Bochs 官方手册翻译】 第一章 Bochs介绍
  • 原文地址:https://www.cnblogs.com/dreamsboy/p/6021247.html
Copyright © 2011-2022 走看看