首页 > 代码库 > glup 入门

glup 入门

本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子。

什么是gulp

gulp的官方定义非常简洁: 基于文件流的构建系统 。这里强调了 streaming,也就是gulp与grunt的在构建流程上的主要区别。具体区别在哪里,后面会简单介绍。

另一个grunt?

相信很多前端的同学对grunt都不陌生,grunt的出现可以说是前端的福音,之前很多需要人肉完成的重复工作,用了grunt,一个命令就搞定了。

说到这里,很多同学可能会比较疑问:既然有了grunt,那同样定位于前端构建的 gulp存在的意义是 ?从gulp的介绍来看,gulp正是为了解决前端同学在使用grunt过程中遇到的这样那样的问题而出现的。是哪些问题呢?在  http://slid.es/contra/gulp 这个slide里,提到了几点,比如:

grunt存在的一些问题

1、插件职能不够单一

2、插件完成了本不该由插件完成的事情(这个我有点迷糊,为什么说是 things don‘t need to be plugins?)

3、配置过于复杂

4、由于糟糕的流程控制导致的临时文件/目录

  • Plugins do multiple things
    • Want a banner? Use the javascript minifier
  • Plugins do things that don‘t need to be plugins
  • Grunt config format is a mess that tries to do everything
  • Headache of temp files/folders due to bad flow control

用grunt的方式构建

前面列举了四点grunt使用过程中存在的问题,其中1、2点个人觉得略显牵强,插件职能不够单一,或者完成了不该由插件完成的事情,这个跟grunt其实关系并不大,更多的应该归责于插件的作者(当然使用频率最高的那部分插件的作者就是grunt团队的兄弟)。

比较认同的是后面两点: 复杂的配置 、 糟糕的流程控制 。

配置这个是否复杂就不说太多了,在这点上可能争议会比较大。而 糟糕的流程控制 这点是被诟病较多的,尤其是在规模稍大的项目里面。下面这张简图是grunt目前的工作流程:读文件、修改文件、写文件——读文件、修改文件、写文件——。。。

问题显而易见:

1、 效率低下 :频繁的磁盘IO会使得构建效率变得低下

2、 无法有效串联 :读文件、修改文件、写文件的循环,导致插件与插件之前的工作无法有效串联起来。

 

备注:配图来自上面提到的slide

技术分享

 

举个例子

比如项目下有个index.html、app.scss、app.js,而index.html里引用了app.css、app.js,如下所示。假设最终的目的是将编译压缩后的app.css、压缩后的app.js 内联到index.html里,同时要保留压缩前的app.css、app.js源文件,那么过程可能如下:(不一定完全准确)

1、将index.html、app.js、编译生成的app.css 拷贝到 dist/ 下

2、压缩 app.js、app.css,并生成到临时目录 .tmp/ 下

3、将 .tmp/app.js、.tmp/app.css 内联到 dist/index.html里

<html>
<head>
<link type="text/css" rel="stylesheet" href=http://www.mamicode.com/"app.css" />
</head>
<body>

<script src=http://www.mamicode.com/"app.js"></script>

</body>
</html>

用gulp的方式构建

从上面的构建流程可以看到,多次文件读写以及临时目录就这样以一种难以避免的姿态出现了。在gulp作者的构想里,合理的构建流程应该是这样的:读取文件——修改文件——修改文件。。。——写文件(配图来自前面提到的slide)

技术分享

按照这种设想,上面举的例子用gulp重写,过程应该是这样

1、读文件:读取index.html、app.js、app.css(读文件)

2、编译、压缩app.css,压缩app.js(处理文件流)

3、将A、B内联到index.html中(还是处理文件流)

4、 写文件 :将最终生成地结果写到 dist/ 目录下 (修改后的index.html、编译后的app.css、未修改过的app.js)

 

压缩文件的简单例子

1、首先全局安装gulp命令行工具(相当于grunt-cli)

npm install -g gulp

2、然后,在项目下安装gulp(相当于grunt)、gulp-uglify

npm install --save-dev gulp gulp-uglify

3、在项目根目录下创建 gulpfile.js

var gulp = require(‘gulp‘),
    uglify = require(‘gulp-uglify‘);

gulp.task(‘default‘, function(){
    gulp.src(‘src/app.js‘)
        .pipe(uglify())
        .pipe(gulp.dest(‘dist/‘));
});

 

我自己测试的,效果很不错哦  只是写的不是很美观

var gulp = require(‘gulp‘);
// 获取 minifycss 模块(用于压缩 CSS)
minifycss = require(‘gulp-minify-css‘),
minifyjs = require(‘gulp-uglify‘),
del = require(‘del‘);


gulp.task(‘minifycss‘, function() {
  //这是常用配置文件
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
// removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
// removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
// minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};

return gulp.src(‘./css/*.css‘) //压缩的文件
.pipe(minifycss(options))
.pipe(gulp.dest(‘minifycss/css‘)) //输出文件夹
.pipe(minifycss()); //执行压缩
});

gulp.task(‘minifyjs‘, function() {
//这是常用配置文件

var options = {
        removeComments: true,  //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
// removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
// removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
// minifyCSS: true //压缩页面CSS
};

return gulp.src(‘./js/*.js‘) //压缩的文件
.pipe(minifyjs(options))
.pipe(gulp.dest(‘minifyjs/js‘)) //输出文件夹
.pipe(minifyjs()); //执行压缩
});
//执行压缩前,先删除文件夹里的内容
gulp.task(‘clean‘, function(cb) {
del([‘minifycss/css‘,‘minifyjs‘], cb);//删除原有文件
});

gulp.task(‘default‘, function() {
gulp.start(‘minifycss‘);
   gulp.start(‘minifyjs‘);
});

 

 

待更新--------------------------------

 

glup 入门