gulp从入门到上树

gulp

哈哈，作为21世纪的前端开发人员，gulp是必不可少的呀，可以不去认真的学，但是一定要去了解一下噻！好了废话少说～

介绍一下－－Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目。好了废话少说～

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

本示例以压缩css、js、然后打包zip，删除文件夹 来展示gulp的常规用法，只要我们学会使用一个gulp插件后，其他插件就差看看其帮助文档了。好了废话少说～

gulp常用地址：
gulp官方网址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424

开始

首先要安装，这个前提需要安装nodeJS(作为一个前端人员，现在都没有装node,可以拉出去了)；

第1步：在你的项目目录下面新建一个src目录,src目录下面分别再新建mian/main.css和js/main.js，以及建一个demo1.html文件以防看效果

第2步： 打开命令行执行 npm init, 一路下去,这时候项目目录下面就有了package.json这么一个包文管理文件了

第3步：全局安装 gulp：

1
npm install --global gulp

第4步：在项目目录安装 gulp的依赖：

1
npm install --save-dev gulp

第5步：在项目根目录下创建一个名为 gulpfile.js 的文件,这时候目录如下图

目录结构

好了 这时候我们的准备工作都已经就位了，下面就是代码时间

第6步：随便给我们项目写上一些例示的代码。

demo1.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../dist/css/main.min.css">
</head>
<body>
    <h1>asdasd</h1>
    <script src="../dist/js/main.min.js"></script>
</body>
</html>

main.css

1
2
3
4
5
h1{
    font-size: 40px;
    color: #fff;
    border: 2px solid #444444;
}

main.js

1
document.querySelectorAll('h1')[0].style.background = 'red';

根据我们的目标 我们要把main.css何main.js打包到src/dist 文件下
打包呢要装gulp插件 我们需要下面几个插件

gulp-uglify（js压缩）、 gulp-cssmin（css压缩）、gulp-rimraf（文件删除）、gulp-rename（文件重命名）、gulp-zip（zip包生成）

第7步： 然后就是把这些插件就安装好了，例如 npm i gulp-uglify --save-dev；

第8步： 开始写我们的gulpfile.js 代码啦～～跃跃欲试了 铺垫这么久～～～首先 我们先做压缩css和js；

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 引包, 一次性引进来～～安逸
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var rimraf = require('gulp-rimraf');
var zip = require('gulp-zip');
// 根据gulp-cssmin， gulp-uglify的官方文档我们写上
// 压缩CSS
gulp.task('mcss', function () {
  return gulp.src('src/main/main.css')
             .pipe(cssmin())
             .pipe(rename({suffix: '.min'}))
             .pipe(gulp.dest('dist/css'));
});
// 压缩JS
gulp.task('mjs', function () {
  return gulp.src('src/js/main.js')
             .pipe(uglify())
             .pipe(rename({suffix: '.min'}))
             .pipe(gulp.dest('dist/js'));
});
gulp.task('defaul', ['mcss', 'mjs']);

这个文件保存了，然后直接 命令行运行gulp
就会看到src 下面多了一个dist文件夹了， 如图
这是压缩后的文件夹

里面就是你压缩好的css和js啦 不信 你运行demo1.html就能看到效果
别忘了，demo1.html里面 <script src="../dist/js/main.min.js"></script> 是链接到这个。

第9步：好了，这会打包也打包好了，我们试试删除文件夹，就删除我们大包的dist文件夹（这会是不是觉得好蛋疼，既然要删除为毛要包呀－－||）;
我们在gulpfile.js 添加删除文件夹的代码

1
2
3
4
5
gulp.task('clear', function () {
  return gulp.src(
    ['./dist'], {read: false}
  ).pipe(rimraf());
});

然后在命令行直接执行 gulp clear 这会我们的文件夹就被删除了。是不是很容易？？插件就是这么容易噻。

第10步：有时候我们要给后端的是文件夹压缩好的zip包，这时候gulp也能帮你开展工作， 铛铛铛～～gulp-zip 这货闪亮登场了，这个用法。直接上代码。
我们在gulpfile.js 压缩文件夹的代码

1
2
3
4
5
6
7
8
9
// 压缩文件夹
gulp.task('zip', function () {
  var arr = ['css', 'js'];
  for(var i = 0; i < arr.length; i++) {
    gulp.src('./dist/' + arr[i])
        .pipe(zip(arr[i] + '.zip'))
        .pipe(gulp.dest('./zip'));
  }
});

这是后你先 gulp 打包生成了dist文件夹，然后gulp zip 命令进行压缩

这会你的目录下就多了一个zip文件夹，里面就是压缩后的zip包。

终于到了上树部分了，这会是不是觉得gulp帮你做了好多事，省了不少心。既然会了，那就多看文档，让你的项目飞起gulp吧。！！

本文标题:gulp从入门到上树

文章作者:Naice

发布时间:2016-10-13, 10:01:34

最后更新:2016-10-14, 13:06:18

原始链接:http://naihe138.github.io/2016/10/13/gulp入门到上树/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
|