gulp 入门使用指南(未完)

其实网上有一大把入门指南了,官网上也讲得很清楚。怎么安装,有哪些方法,我在网上已经看到很多很多很多了。

可是我还是很懵逼。不能理解为什么要使用这些工具,不知道学习了这些方法该怎么用,在哪里用。光看文档是学不会的,得有实战!实战啊!我感受不到这些新技术的好处。所以最初学习的时候,我迫切地渴望能有一个人,一篇文章,能通过一个具体的项目来指引一下我。然鹅并没有。(在小公司的坏处,没有指导,突破不了,还懒)

现在我对gulp也还是懵懵哒。只能慢慢写咯。



几乎每一个前端工具都对应了它自己的配置文件,nodejs 有 package.json,webpack 有 webpack.config.js,gulp 则是 gulpfile.js。

你要用它,你就得新建配置文件,因为你要在里面写配置啊。所以必须在根目录下先新建一个 gulpfile.js 文件。

一、几个方法

1. gulp.task()  // gulp的配置文件gulpfile.js里可以定义多个任务,该方法就是用来定义任务的

var gulp = require("gulp");
gulp.task("default", function () {
   //这里是具体要执行的任务代码 ,我写的很简单的,就在控制台打印
  console.log("hello");
})

默认任务名是 default,执行该任务:

在终端里进入你的项目根目录,确保你已经 npm install gulp --save-dev 将gulp安装在本地了(全局和本地分得清吧?),然后在终端里输入 gulp default,(default可以省略)会发现终端打印了 hello.

你也可以执行别的任务。再定义一个任务叫作 mytask:

gulp.task("mytask", function () {
    //将根目录下所有的css文件全部挪到build文件夹下
    gulp.src(["./*.css"]).pipe(gulp.dest("./build"));
})

这个任务是为了整理项目结构。

有时候因为多人合作问题,或者新手不懂乱放文件,或者偷懒,我们的项目结构可能会很乱,比如有的css文件放在根目录下,有的放在a文件夹里,有的放在b文件夹里。这不利于我们更好地管理项目,但是人工一个个去挪文件实在不人性化,于是乎,我们就借 gulp 来帮我们处理这些机械又费时的工作。

终端执行 gulp mytask,就会发现你的项目底下多了一个build 文件夹,里面就是之前项目根目录下所有css文件(此时根目录下的css文件还没被删掉哦,所以这只能相当于复制,而不是剪切)

除了这个任务,gulp还可以帮我们干很多事情,最常用的应该就是压缩和合并代码了吧。我就不细说了。

2. gulp.pipe()  //管道,传输文件流

现在看不懂没关系,反正大概就是一个桥梁的作用,帮助文件流从一个地方传到另一个地方。

3. gulp.dest()  //写入文件

4. gulp.src()  //读取文件流

该 API 在上一段代码里已经出现过了,作用就是用来读文件的。通过这个方法,我们可以获取该文件路径、文件名、内容等信息,即文件流。但是 gulp.src()获取的并不是原始文件流,而是虚拟文件流,只是它里面存储了原始文件流的信息而已。

这个文件流就好比一捧水。你可以对水进行很多操作,加盐、加糖、烧开什么的。然后通过一个管道 gulp.pipe() 倒到别的地方去。

还是不懂拿来干嘛??

比如:还是以上一个例子为例,我读取了根目录下所有的css文件,然后全部扔进了build文件夹下。可是css文件太多,而且每个文件的内容又很少,看起来就不舒服啊!那不如合并这些css文件,只生成一个css文件扔进build文件夹下,岂不是更好?

所以,我们用 gulp.src() 读取根目录下所有的css,得到了一个虚拟文件流,我们姑且认为反正就是一捧水,然后通过什么什么代码,将这些css进行合并到一起,并定义一个新的文件名。写到这里大家不要忘啦,前面提到过,这里还是虚拟文件流。我们用 gulp.pipe() 管道将它传输到现实世界里去。但是世界之大,还差一个容身的地方,我们就把传过来的东西用 gulp.dest() 写入到特定的文件夹里。

Done. 不知道我讲清楚了没?

未完,明天写。

时间: 2024-12-20 03:45:08

gulp 入门使用指南(未完)的相关文章

【转】Gulp入门基础教程

Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用GulpGulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端 代码的编译(sass.less).压缩.测试:图片的压缩:浏览器自动刷新,还有许多 强大的插件可以在这里查找.比起Grunt不仅配置简单而且更容易阅读和维护,我们 可以做一个对比: Grunt: sass: { dist

[译]App Framework 2.1 (1)之 Quickstart (未完待续)

最近有移动App项目,选择了 Hybrid 的框架Cordova  和  App Framework 框架开发. 本来应该从配置循序渐进开始写的,但由于上班时间太忙,这段时间抽不出空来,只能根据心情和兴趣,想到哪写到哪,前面的部分以后慢慢补上. App Framework 前生是是叫 jqMobi 注意大家不要和 jQuery Mobile 混淆了,它们是两个不同的框架,一开始我还真混淆了0.01秒. 这里我先翻译一下Quickstart 部分,一是自己工作上用的上,二是也想顺便练练英文,最关键

React v16-alpha 源码简读【未完待续】

一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm install $gulp default (建议使用node 6.0+) gulp将文件处理在根目录下的build文件夹中,打开build查看react的源码,结构清晰,引用路径明了 二.从生成 virtual dom 开始 react 生成一个组件有多种写法: es 5下:var Cp=React.

Exp2 后门原理与实践(未完待续)

Exp2 后门原理与实践 实验环境 攻击机 kali 4.14(64位) (IP: 10.0.2.6/24) 靶机 ubuntu 16.04(32位) (IP: 10.0.2.4/24) windows 7 sp1(64位) (IP: 10.0.2.7/24) nc/ncat的使用 nc(全称是netcat)是一个用于TCP/UDP连接和监听的linux工具,有着网络工具中的"瑞士军刀"的美誉.nc的实现版本大致有两种,一种是带有-e或-c 选项可以直接给出执行命令,另一种不支持-e选

十分钟快速入门 Python,看完即会,不用收藏!

本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. 读完本篇文章后,可对 Python 语言特性.编码风格有一定了解,并可写出简单的 Python 程序. 100?多位经验丰富的开发者参与,在 Github 上获得了近?1000?个?star?的开源项目想了解下吗?项目地址:github.com/cachecats/c- 一.安装与运行 各个系统的 Pyth

whatweb.rb 未完待续

#!/usr/bin/env ruby #表示ruby的执行环境 =begin # ruby中用=begin来表示注释的开始 .$$$ $. .$$$ $. $$$$ $$. .$$$ $$$ .$$$$$$. .$$$$$$$$$$. $$$$ $$. .$$$$$$$. .$$$$$$. $ $$ $$$ $ $$ $$$ $ $$$$$$. $$$$$ $$$$$$ $ $$ $$$ $ $$ $$ $ $$$$$$. $ `$ $$$ $ `$ $$$ $ `$ $$$ $$' $ `$

把握linux内核设计思想系列(未完待续......)

[版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流,请勿用于商业用途] 把握linux内核设计思想(一):系统调用 把握linux内核设计思想(二):硬中断及中断处理 把握linux内核设计思想(三):下半部机制之软中断 把握linux内核设计思想(四):下半部机制之tasklet 把握linux内核设计思想(五):下半部机制之工作队列及几种机制的选择 把握linux内核设计思想(六):内核时钟中断 把握linux内核设计思想(七):内核定时器和

细菌觅食优化算法:理论基础,分析,以及应用(未完)

原作者:Swagatam Das,Arijit Biswas,Sambarta Dasgupta,和Ajith Abraham  [摘 要]细菌觅食优化算法(Bacterial foraging optimization algorithm[BFOA])已经被分布式优化和控制的同行们当作一种全局性的优化算法接受.BFOA是由大肠杆菌的群体觅食行为所启发而总结出来 的.BFOA已经吸引了足够多的研究者的注意,由于它出现在解决真实世界中一些应用领域上优化问题的高效性.E.coli 的群体策略的生物基

Linux设备驱动开发学习(2):Linux设备驱动简介(未完)

(未完待续......)