linux gulp启动服务器,开始使用Gulp

开始使用Gulp

开始使用Gulp

什么是Gulp

Gulp的安装

Gulp插件

gulp-less

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 here

console.log('task run');

});

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

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

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

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

gulp.task() #gulp任务

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

具体API请参考: http://www.gulpjs.com.cn/docs/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

继续在上面的代码的基础上更改,继续我们的流式操作。

gulpfile.js :

var gulp = require('gulp');

var less = require('gulp-less');

var autoprefixer = require('gulp-autoprefixer');

// 导入minifycss模块

var minifycss = require('gulp-minifycss');

gulp.task('style', function() {

return gulp.src('./main.less')

.pipe(less())

.pipe(autoprefixer())

.pipe(gulp.dest('./dist/'))

// 这里加一节pipe,做一个minifycss操作

.pipe(minifycss())

.pipe(gulp.dest('./dist/'));

});

这样的话我们编译后生成的css文件又多了一道压缩的过程,使得最终的css文件大小更小。

结语

好吧!这就是gulp的使用示例,其实还是很简单的,自己需要什么样的构建操作就找相应的gulp插件,然后通过同样简单的方式就可以插入到我们的构建流当中,自动构建好我们的项目。

参考与扩展

0b1331709591d260c1c78e86d0c51c18.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值