前端工作流利器——gulp

[图片上传失败...(image-72fa6-1527476141827)]

一个发明家的职责是发明出产品，剩下的，就交个机器去完成吧！

gulp这个单词愿意是：狼吞虎咽的，一气呵成的。这个node应用用这个名字，应该就是希望能够将各种文件通过前端工程师一个命令，就可以像流水线一样，完成一系列繁杂的工作。这个应用的产生不得不提到一个名词——前端工程化。

什么是前端工程化

作为一名开发工程师，发明代码程序的过程是幸福和充满乐趣的，但是苦恼于一些重复繁杂的任务，诸如将写好的代码重新排版，提高语义化；将图片压缩打包；将less转化为css等等。
gulp（尬欧婆）的诞生解放了程序员，它只需要通过简单的代码设置，就可以通过一个命令让这些繁杂的工作像流水线一样被机器完成，而且又快又完美。[图片上传失败...(image-3040c8-1527476141827)]
简而言之，前端工程化就是前端的自动化。

nodejs的数据流是什么？

以前工程师们写好代码==>保存查看==>发现需要排版==>去排版==>发现需要压缩==>去压缩。。。
而使用gulp之后，通过nodejs 的数据流，这些过程不需要每次都保存查看再去进行下一步骤，而是一气呵成。举个例子：

数据流：1+1+3+5-4=6 ==> 6```



#gulp的API

###纵观gulp，API仅仅只有四个而已。
   1. `gulp.src()`：将文件选中，变成数据流（这里可以理解为水流）并pipe(管道传输)到其他工具或者文件夹中。
   2. `gulp.dest()`：将处理好的文件放入到...
   3. `gulp.task()`：定义一个任务，即定义一个生产线。
   4. `gulp.watch()`：监测某文件并进行仿某项操作。

###[gulp的API文档详解](http://www.gulpjs.com.cn/docs/api/)

*****
#实操演练

### 第一步：初始化
`npm init -y` ——创建package.json文件。
`touch gulpfile.js`——创建gulpfile.js。
`npm install --save-dev gulp`——安装gulp。
`npm install --save-dev gulp-cssnano && npm install --save-dev gulp-concat`——安装css压缩工具包和文件合并工具包

###第二步：写代码

目录层级：

![](http://upload-images.jianshu.io/upload_images/3706166-6e676928dd5f4c2b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

我的需求是通过gulp自动将三个css文件合并成一个文件并压缩去掉其中的空格等等。

gulpfile.js

    var gulp = require('gulp');
    var concat = require('gulp-concat');
    var cssnano = require('gulp-cssnano');

    gulp.task('build:css',function(){
      return gulp.src('./src/css/*.css')
      .pipe(concat('all.css'))
      .pipe(cssnano())
      .pipe(gulp.dest('./dist/'));
    });


在node端运行：


![](http://upload-images.jianshu.io/upload_images/3706166-c89ccbaaac4647c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


######或者直接使用gulp命令

gulpfile.js

    var gulp = require('gulp');
    var concat = require('gulp-concat');
    var cssnano = require('gulp-cssnano');

    gulp.task('default',function(){
      return gulp.src('./src/css/*.css')
      .pipe(concat('all.css'))
      .pipe(cssnano())
      .pipe(gulp.dest('./dist/'));
    });

在node端运行：


![](http://upload-images.jianshu.io/upload_images/3706166-fcc09852347a0faa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

最终输出在`./distall.css`

    .box1{width:100px;height:100px;background-color:red;display:inline-block}.box2{width:150px;height:150px;background-color:blue;border-radius:50%}.box2,.box3{text-align:center}.box3{width:200px;height:200px;background-color:#ff0;border-radius:5px}

##运行成功！

gulp详细使用方法自己去看文档

这个博客写的不错