怎么用Gulp搭建简易前端自动化工程

本篇内容主要讲解“怎么用Gulp搭建简易前端自动化工程”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用Gulp搭建简易前端自动化工程”吧!

准备工作

安装Node

首先Gulp是基于nodejs的，所以安装nodejs是前提，Node可以说是前端神器，基于Node有各种各样的工具，正是因为这些工具让我们非常方便的构建前端工程。

更改Node插件默认安装位置(非必需)

我自己一般不喜欢在C盘状太多与系统无关的东西，而通过Node自带的npm安装的插件默认在C盘，但是我将Node安装到D盘后，想让插件就安装在Nodejs的主目录下，怎么办呢?

• 在Node主目录下新建"node_global"及"node_cache"两个文件夹

启动cmd，输入 //后面的设置目录根据你的目录结构自行更改 npm config set prefix "D:\Program\nodejs\node_global" npm config set cache "D:\Program\nodejs\node_cache"

• 关闭cmd，打开系统对话框，“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。

• 进入环境变量对话框，在系统变量下新建"NODE_PATH"，输入"D:Programnodejsnode_globalnode_module"。  由于改变了module的默认地址，所以上面的用户变量都要跟着改变一下(用户变量"PATH"修改为"D:Programnodejsnode_global")，要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。

经过这四步的设置就可以让安装的Node插件放在Nodejs的主目录了。

安装Gulp

//全局安装Gulp npm install -g gulp //在项目中安装Gulp npm install --save-dev gulp

运行gulp -v,如果不报错，表示安装成功

然后在命令行运行

npm init

让项目生产package.JSON文件

搭建工程

众所周知，在开发工程中有开发和上线两个过程，在开发中，我们一般需要自动刷新以及实时编译，但是如果上线，我们就需要考虑很多优化的东西，比如文件编译压缩，静态资源放缓存处理等等问题，我自己搭的这个工程只涉及到文件编译压缩，实时刷新，静态资源放缓存这三个基本的流程。

在项目的目录结构如下

-------------------project     |     |--------------dist (该文件夹为打包生成的)     |   |     |   |----------CSS     |   |   |     |   |   |------index-9dcc24fe2e.css     |   |     |   |----------js     |   |   |     |   |   |------index-9dcc24fe2e.js     |   |----------index.html      |     |--------------src     |   |     |   |----------scss     |   |   |     |   |   |------index.scss     |   |     |   |----------js     |   |   |     |   |   |------index.js     |   |     |   |----------index.html     |--------------gulpfile.js     |--------------package.json

开发所用流程

文件编译

在工程中准备使用scss作为css的预编译，所以需要利用gulp对scss进行编译，所以首先安装gulp-sass。

npm install --save-dev gulp-sass

安装完成之后，直接在gulpfile.js引用配置

const sass = require('gulp-sass'); //scss编译  gulp.task('scss:dev',()=>{     gulp.src('src/scss*.json','src/*.html'])         .pipe(reCollector({             replaceReved: true,  //模板中已经被替换的文件是否还能再被替换,默认是false             dirReplacements: {   //标识目录替换的集合, 因为gulp-rev创建的manifest文件不包含任何目录信息,                 'css/': '/dist/css/',                 'js/': '/dist/js/'             }         }))         .pipe(gulp.dest('dist')) });

并没有正常替换?

在我自己写的时候，出现这个问题，运行完成该任务后，html中的css和js引用并没有发生变化，网上搜了半天，才知道是由于自己用了gulp-rename插件，然后将文件名都添加了.min(至于为什么添加，仅仅是因为是压缩过的，应该写个)而在自己写的html里面引用的文件并没有.min，由于gulp-rev-collector在替换的时候根据生成的json文件替换，在json中，文件都有了.min而在html中没有，所以无法匹配，自然也就不能实现替换了，所以在替换的时候一定要注意gulp-rev生成的json文件中的css，js与html中的引用的一样，否则无法实现替换。

<font  color="red">在gulp-rev-collector的api中有一个revSuffix，这个看起来可以实现类似于gulp-rename的功能，但是不知道该怎么用，大家如果知道的话请告诉我...</font>

执行所有任务

完成上面几个步骤后我们将所有任务串起来，让其可以一条命令然后全部执行

gulp.task('build',['clean', 'css', 'js', 'reCollector']);

再次理解gulp

gulp---它的task是顺序执行吗?

本以为到这里，就算是写完了，运行，***，打包生成文件，再运行一次，报错了!!!!

[19:04:57] Finished 'default' after 7.38 μs stream.js:74       throw er; // Unhandled stream error in pipe.       ^  Error: ENOENT: no such file or directory, stat 'D:\project\dist\js\index-6045b384e6.min.js'     at Error (native)

提示我找不到这个文件，这让我很郁闷啊，然后我分开执行，很ok，可以确定是执行顺序有问题，很可能在没有清理完成就执行后面了，查了gulp的官网文档才知道本身gulp的pipe是一个一个任务进行的，是同步的，但是每个task之间是不同步的，是一起进行的，这也验证了我的猜想，所以在网上找如何解决这个问题，找到一个叫run-sequence的npm插件，配置文件如下：

//进行打包上线 gulp.task('build', ()=> {     runSequence('clean', ['css', 'js'], 'reCollector'); });

本以为运行就ok，结果，还是报错，这里就涉及到对gulp的另一个理解

run-sequence插件对异步任务的处理

在用这个插件让任务有序进行后，我想进一步直观的看到它对任务的序列化，自己写了一个demo，如下：

gulp.task('a',function(){     setTimeout(function () {         console.log(1);     },30); }); gulp.task('b',function() {     console.log(2); }); gulp.task('ab',function(){     runSequence('a','b'); });

但是这里就出现问题了，runSequence不管用了，找插件的说明和gulp官方文档，原来异步任务，像setTimeout，readFile等，需要添加一个callback的执行，这里的callback()就会返回一个promise的resolve()，告诉后面的任务，当前任务已经完成，后面可以继续执行了，所以在task  a里面执行callback。

gulp.task('a',function(cb){     setTimeout(function () {         console.log(1);         cb();     },30); });

那为什么前面写的那些任务不需要添加一个callback呢?由于gulp的pipe流让每一个task中的小任务(每一个pipe)顺序执行，从而整个pipe流是同步的，并不是异步任务，所以并不需要手动让其返回promise，run-sequence会自动帮我们管理。

到此，相信大家对“怎么用Gulp搭建简易前端自动化工程”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！