使用gulp实现前端自动化

Posted web前端与开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用gulp实现前端自动化相关的知识,希望对你有一定的参考价值。

gulp是一个自动化构建工具,开发者可以用它来自动执行一些常见的任务。这里以我之前做的一个demo为例,简要介绍如何使用gulp实现前端工程自动化。


项目结构


其中 src目录下表示的是项目的源代码,可以看到其中有less、js、html等,而dist目录则是保存的是gulp编译后生成的代码,相当于生产环境。最后也最重要的是 gulpfile.js,这个文件用于设置gulp相关的配置,类似于webpack中的webpack.config.js


安装

这里使用的gulp为v3.9.1,语法和最新的v4.x有所出入,想学习最新的gulp语法,可以参考gulp.js - The streaming build system 。

3.9.1 安装如下:


   npm install --save-dev gulp


语法

  • gulp.task() 用于定义一个 gulp 任务,在命令行中可以使用 gulp [任务名] 开启该任务。

  • gulp.src() 会返回符合匹配的文件流,可以被pipe()到其他插件中。

  • gulp.dest() :输出所有数据。

  • gulp.watch() 用于监测文件的变动。


实践


在这个项目中,有一些常见的需求,这里使用gulp来实现自动化:

  • less转css

  • css压缩合并

  • js压缩合并

  • 图片压缩


gulpfile.js中首先需要导入gulp和一些常用的插件,本次demo使用到的插件如下:


var gulp = require('gulp'),   


//less 转 css

 less = require('gulp-less'),   


//css压缩                        

csso = require('gulp-csso'),  


 //合并文件                   

concat = require('gulp-concat'), 


//js 压缩                 

uglify = require('gulp-uglify'),   


 //js 检查                  

jshint = require('gulp-jshint'),    


//清除文件              

clean = require('gulp-clean'),     


 //图片压缩               

imagemin = require('gulp-imagemin'),    


//添加版本号         

rev = require('gulp-rev'),                 


 //版本号替换      

revReplace = require('gulp-rev-replace'),     


//解析html资源定位    

useref = require('gulp-useref'), 


 //if语句                    

gulpif = require('gulp-if'),    


 //创建web服务器                

connect = require('gulp-connect');            


图片压缩
获取到src下所有以.jpg.png结尾的图片,将其压缩后输出到dist目录下。

gulp.task('dist:img', () => {    

    gulp.src(['./src/**/*.jpg', './src/**/*.png'])    

    .pipe(imagemin())    

    .pipe(gulp.dest('dist/')) 

})



less压缩合并为css


先清除已存在的css,然后将src下以.less结尾的文件通过less()转为css文件,再通过csso()以及concat()实现对css的压缩合并。


gulp.task('dist:css', () => {    

    gulp.src('dist/css/*.css').pipe(clean());

     return gulp.src('./src/less/*.less')     

    .pipe(less())   

     .pipe(csso())    

    .pipe(concat('public.css'))   

     .pipe(gulp.dest('dist/css/')); 

});



js压缩合并


js压缩合并的过程大同小异,增加了一个jshint()代码审查的过程,它会将不符合规范的错误代码输出到控制台。


gulp.task('dist:js', () => {    

    gulp.src('dist/js/*.js').pipe(clean());    

    return gulp.src('./src/js/*.js')    

    .pipe(jshint())    

    .pipe(jshint.reporter('default'))    

    .pipe(uglify())    

    .pipe(concat('public.js'))   

     .pipe(gulp.dest('dist/js/'))

 });



less转css

在开发过程中,因为html不能直接引入.less文件,因此还需要生成开发环境的.css


gulp.task('src:css', () => {    gulp.src('src/css/*.css').pipe(clean());    
      return gulp.src('./src/less/*.less')    .pipe(less())    .pipe(gulp.dest('src/css/')); });


添加版本号

为了防止浏览器对文件进行缓存,需要对文件添加版本号,保证每次获取到的都是最新的代码。

gulp.task('revision', ['dist:css', 'dist:js'], () => {    
    return gulp.src(["dist/css/*.css", "dist/js/*.js"])    .pipe(rev())    .pipe(gulpif('*.css', gulp.dest('dist/css'), gulp.dest('dist/js')))    .pipe(rev.manifest())    .pipe(gulp.dest('dist')) })
    gulp.task('build', ['dist:img'], () => {    var manifest = gulp.src('dist/rev-manifest.json');    
       return gulp.src('src/index.html')    .pipe(revReplace({        manifest: manifest    }))    .pipe(useref())    .pipe(gulp.dest('dist/')) })


revision 中,首先通过 rev() 对 dist 目录下的 .css/.js 生成一个文件名带版本号的文件,例如本例中 public.css 生成 public-5c001c53f6.css,然后分别输出到不同的目录下,最后生成一个 rev-manifest.json 文件,存储了原文件和带版本号文件之间的映射关系,如下:

{  
   "public.css": "public-5c001c53f6.css",  

       
"public.js": "public-93c275a836.js"
}

build中,先获取到rev-manifest.json中的对象,然后利用revReplace()来替换版本号,再使用useref()来进行资源的解析定位,最后输出即可。

以引入js文件为例,源html文件中对文件的引入则要改写为以下形式,即以注释的形式写入构建后生成的文件路径,如下:

<!-- build:js ./js/public.js -->    <script ></script>    <script ></script> <!-- endbuild -->

最后生成的html为:

<script ></script>

具体的语法规则可以参见 gulp-useref 。 [href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Flvqq%2FDemos%2Ftree%2Fmaster%2Fgulp-demo"]


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

使用connet.server()来创建一个本地服务器,利用gulp.watch()来对src下的文件进行监测,如果发生变化,则执行编译lesscss和刷新页面的任务。

gulp.task('connect', () => {    connect.server({        root: 'src',        livereload: true,        port: 8888    }) }) gulp.task('reload', () => {    gulp.src('src/*.html')    .pipe(connect.reload()) }) gulp.task('watch', () => {    gulp.watch('src/**/*', ['src:css', 'reload']) })




以上是关于使用gulp实现前端自动化的主要内容,如果未能解决你的问题,请参考以下文章

用gulp加速前端开发

Gulp构建前端自动化工作流

利用Gulp实现代码自动化部署

基于 Laravel 开发博客应用系列 —— 从测试开始:使用Gulp实现自动化测试

自动化构建工具Gulp基础使用指南

前端自动化-----gulp详细入门(转)