使用大口构建前端自动化的示例

grave是一个自动构建工具，开发人员可以使用它来自动执行一些常见的任务。这里，以我之前做过的一个演示为例，简单介绍一下如何用grave实现前端工程自动化。

项目结构

src目录代表项目的源代码，可以看做less、js、html等。而dist目录存储的是编译后生成的代码，相当于生产环境。最后一个也是最重要的一个是gulpfile.js，用于设置gulp相关的配置，类似于webpack中的webpack.config.js。

装置

这里使用的gulf是v3.9.1，它的语法与最新的v4.x不同，如果想学习最新的gulf语法，可以参考gulf . js-the streaming build system。

3.9.1安装如下：

npminstall-save-dev大口语法

大口. task()用于定义大口任务，可以在命令行中使用大口[task name]打开。Gulp.src()将返回匹配的文件流，该文件流可以通过管道()传输到其他插件中。gland . dest():输出所有数据。gough . watch()用于监控文档中的更改。实践

在这个项目中，有一些共同的需求，在这里使用大口来实现自动化：

少来css css压缩合并js压缩合并图像压缩在gulpfile.js中首先需要导入gulp和一些常用的插件。本演示中使用的插件如下：

var gland=require(' galw ')、less=require(' galw-less ')、//less to CSS csso=require(' galw-csso ')、//CSS压缩concat=require(' galw-concat ')、//合并文件uglify=require(' galw-uglify ')、//js压缩js hint=require(' galw-js hint ')、//js check clean=require(' galw-clean ')、//清除文件imagemin=require(' galw-imagemin ')、//压缩图像rev=require(' galw-grave//创建web服务器图像压缩

获取所有以结尾的图片。jpg或。在src下png，压缩它们并输出到dist目录。

大口. task ('dist3360img '，()={大口. src ([)。/src/* */*。jpg '，'。/src/* */*。png'])。管道(imagemin())。烟斗(大口。目的地

首先清除现有的css，然后转换以。通过less()将src下的less转换为css文件，然后通过csso()和concat()压缩并合并css。

gough . task(' dist : CSS '，()={ gough . src(' dist/CSS/*)。css ')。管道(清洁())；返回大口。src('。/src/less/*。减’)。管道(减())。管道(csso())。管道(concat('public.css ')。pipe(gout . dest(' dist/CSS/'))；});Js压缩合并

js压缩和合并的过程类似，增加了一个jshint()代码审查过程，会将不符合规范的错误代码输出到控制台。

gough . task(' dist : js '，()={ gough . src(' dist/js/*)。js’)。管道(清洁())；返回大口。src('。/src/js/*。js’)。管道(jshint())。管道(jshint.reporter('默认')。烟斗。管道(concat('public.js ')。pipe(gout . dest(' dist/js/'))})；less=css

在开发过程中，因为html无法直接导入。文件少，就要生成。开发环境的css。

大口. task('src:css '，()={大口. src('src/css/*)。css ')。管道(清洁())；返回大口。src('。/src/less/*。减’)。管道(减())。pipe(gout . dest(' src/CSS/'))；});添加版本号

为了防止浏览器缓存文件，需要在文件中添加版本号，以确保每次都能获得最新的代码。

gull . task(' revision '，['dist:css '，' dist:js']，()={ return gull . src([' dist/CSS/*)。css '，' dist/js/*。js'])。管道(版本())。管道(gulf(' *。css '、gough . dest(' dist/CSS ')、gough . dest(' dist/js '))。管道(rev.manifest())。pipe(gout . dest(' dist ')})gout . task(' build '，['dist:img']，()={ var manifest=gout . src(' dist/rev-manifest . JSON ')；在修订版中，返回gulf . src(' src/index . html ')。管道(版本替换({清单：清单}))。管道(useref())。管道(大口.目的地(' dist/'))})。首先，为生成一个具有版本号的文件。css/。按版本()列出的dist目录中的js。例如，在本例中，public.css生成public-5c001c53f6.css，然后将它们输出到不同的目录。最后，生成一个rev-manifest.json文件，该文件存储原始文件和具有版本号的文件之间的映射关系，如下所示：

{ ' public . CSS ' : ' public-5c 001 c 53 f 6 . CSS '，' public . js ' : ' public-93c 275 a 836 . js ' }在构建中，首先获取rev-manifest.json中的对象，然后用revReplace()替换版本号，然后使用user。

以js文件的引入为例，在源html文件中的文件引入要改写为如下形式，即构造后生成的文件路径要以注释的形式写入，如下图：所示

！- build:js。/js/public . js-script src=' http :/js/jquery-1 . 12 . 4 . min . js '/script script src=' http :/js/MyAlBum . js '/脚本！- endbuild -最后生成的html是：

脚本src=' http:/js/public-93c 275 a 836 . js '/脚本的具体语法规则可以在glow-user ef中找到。

创建本地服务器，实现自动刷新

使用connet.server()创建本地服务器，使用glaw . watch()监控src下的文件，如果有任何变化，执行将less编译成css和刷新页面的任务。

gough . task(' connect '，()={ connect . server({ root : ' src '，livereload: true，port : 8888 })})gough . task(' reload '，()={ gough . src(' src/*)。html ')。pipe(connect . reload())})gout . task(' watch '，()={ gout . watch(' src/* */*，['src:css '，)。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。