你好,游客 登录 注册 搜索
背景:
阅读新闻

开始使用Gulp

[日期:2016-12-29] 来源:Linux社区  作者:panzer9 [字体: ]

开始使用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插件,然后通过同样简单的方式就可以插入到我们的构建流当中,自动构建好我们的项目。

参考与扩展

gulp中文网 : http://www.gulpjs.com.cn/
gulp plugin search (gulp插件搜索): http://gulpjs.com/plugins/
Gulp不完全入门教程 (推荐) : http://www.ido321.com/1622.html
use-gulp (推荐, 东西很全): https://github.com/Platform-CUF/use-gulp
gulp入门教程 : http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

本文永久更新链接地址http://www.linuxidc.com/Linux/2016-12/138941.htm

linux
相关资讯       gulp 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款