什么时候开始使用,从…开始

  • 编辑: 植怡嘉
  • 2019-11-11 10:24:20
  • 人阅读
哪一年开始使用的,Gulp-AutoFixerGulp-MinifyCSS结论参考和扩展接触Gulp不大,但更多的感觉。但一句话:节省了很多麻烦。如果您还做Web前端,也希望更方便和高效火何时开始使用...

gulp-autoprefixer

gulp-minifycss

结语

参考与扩展

接触gulp不多,感触却多。不过一句话:省了好多麻烦。如果你也是做web前端的,并且也想更加便捷高效的去完成自己的项目,那么可以尝试使用一下gulp。

什么是Gulp

首先看看gulp的定义: gulp是一个基于流的自动化构建工具。大家都明白什么是自动化 (就是懒人不用动手了呗),构建工具就是说这是一个工具,并且是用来构建工程用的 。那么什么是基于流呢?如果知道unix的管道命令的人就会知道,把上一个操作的输出当做下一个操作的输入,形成一个连贯的过程。打个比方就好像是一个生产汽车的自动化车间,可能首先是生产出一个轮子,向下传递,然后下一道工序是加上车架,然后再下一道工序是喷漆等等。而这个流程线就是所谓的流了。

好吧!管他什么流呢!反正是自动化的肯定就是能帮我们省很多事的 (不过流这样的方式的确很便捷、高效)。

Gulp的安装

gulp是很简单的 ( 对于已有npm和基础的nodejs经验的同学)

$ npm install -g gulp

gulp实际上就和nodejs模块一样,安装方式相同,接下来你会发现,实际上这就是一个模块嘛!

在这里我们通过npm init 初始化一个项目。

然后在你的工程目录的根目录下创建一个gulpfile.js (文件名可不能变啊) ,写入如下内容:

var gulp = require('gulp'); // 引入gulp模块gulp.task('mytask', function () {/* 这里声明一个task,也就是gulp任务 */// do something hereconsole.log('task run');});

然后我们可以在命令行 (处于gulpfile.js同一目录下) 中使用gulp mytask 这样的命令运行一个gulp任务 ( 这里的mytask就是我们声明的任务 ) 。好吧!直到这里感觉就好像是前面声明了一个事件,然后在这里用一个命令触发了那个事件那么简单。而这个事件里面就是需要自动化处理的内容了。

关于gulp本身我们需要知道几个东西

gulp.src() #原始文件路径

gulp.dest() #文件导出的目标路径

gulp.task() #gulp任务

gulp.watch() #监控文件变动

具体API请参考:

Gulp插件

gulp任务运行后,就会执行一些操作。大多数时候gulp的操作能力是来自gulp插件,我们需要什么样的操作就引入什么样的插件,然后在gulp任务中按照我们的意愿来组织。

插件的引入方式也就是nodejs 模块的引入方式,用require即可。插件的安装方式也是用npm安装。

gulp-less

这个插件是用来编译less文件的。

安装此插件:

npm install gulp-less

gulpfile.js中写入

var gulp = require('gulp');var less = require('gulp-less');gulp.task('style', function() { return gulp.src('./main.less').pipe(less()).pipe(gulp.dest('./dist/'));});

在根目录下创建 main.less 这个文件并写入一定的less代码。然后我们用gulp style 运行一下这个style任务。发现我们的main.less 文件编译成了一个css文件,并且文件自动生成在我们设定的 ./dist/目录下,文件名为 main.css 。

gulp-autoprefixer

autoprefixer可以自动为css中的某些代码添加如 -moz- 、 -webkit- 等前缀,保证其兼容性。autoprefixer会参考Can I Use 网站的数据来判定哪些属性需要添加,又该添加什么样的前缀。

安装插件方法不变

npm install gulp-autoprefixer

我们在上一段代码的基础上做出改进

gulpfile.js :

var gulp = require('gulp');var less = require('gulp-less');// 导入autoprefixer模块var autoprefixer = require('gulp-autoprefixer');gulp.task('style', function() { return gulp.src('./main.less').pipe(less())// 这里加一节pipe,做一个autoprefixer操作.pipe(autoprefixer()).pipe(gulp.dest('./dist/'));});

这样一来,我们一个gulp style 后发现,这个main.less 文件除了自动编译了之外,还自动添加了一些必要的前缀,经过这两道工序后导出到目标文件夹中。

这就是所谓流式的操作了,要加工一个东西就一套工序加工完,而不是加工了一道工序,放回去,然后再取出来再加工,不觉得麻烦啊!直接全部加工好了再放回去不就省事儿多了嘛!省去好多拿和放的过程 (在gulp中指与磁盘的读写,不用频繁的读写磁盘,自然速度会有所提升)

gulp-minifycss

这是压缩css文件的一个gulp插件

安装 :

npm install gulp-minifycss

以上就是电脑技术吧给大家介绍的如何使用开始使用Gulp的方法了,如何使用开始使用Gulp的方法到这里也全部结束了相信大家对如何使用开始使用Gulp的方法都有一定的了解了吧,好了,如果大家还想了解更多的资讯,那就赶紧点击电脑技术吧系统官网吧。

本文原标题:开始使用的,以 开始

版权声明:本文由 植怡嘉 整理编辑,如果侵权请联系我们!

转载注明出处:https://www.nintaus.net/houtai@123/makehtml_archives_action.php?endid=0&startid=0&typeid=0&totalnum=11732&startdd=1520&pagesize=20&seltime=0&sstime=1589370344&stime=&etime=&uptype=mkall&mkvalue=0&isremote=0&serviterm=

文章评论

共有 条评论来说两句吧...

用户名:

验证码:

Top