当前位置：首页 > 技术分析 > 正文内容

前端自动化gulp遇上es6从 无知到深爱

ruisui883个月前 (02-03)技术分析19

Gulp是什么？

Gulp是前端自动化的工具，但Gulp能用来做什么

1.搭建web服务器

2.使用预处理器Sass，Less

3.压缩优化，可以压缩JS CSS Html 图片

4.自动将更新变化的代码实时显示在浏览器

5.前端测试

......

这些都不是他的全部功能，社区丰富的插件，为他提供了强大的后盾。

首先下载gulp(前提默认你安装好了node，先 npm install，创建一个package.json)

npm install gulp -g //全局安装
npm install gulp --save-dev //本地安装并加入package.json

一、安装各种神奇的插件

接下来安装各种需要的插件：

npm install babel-core babel-preset-es2015 browser-sync gulp gulp-autoprefixer gulp-babel gulp-cache gulp-clean gulp-cssnano gulp-htmlmin gulp-if gulp-imagemin gulp-load-plugins gulp-plumber gulp-sass gulp-size gulp-sourcemaps gulp-uglify gulp-useref main-bower-files wiredep --save-dev

各种插件按需求自己选择，各自功能如下：

1.babel-core babel-preset-es2015 gulp-babel 用于解析es6转换为es5

2.browser-sync 服务器同步浏览

3.gulp-autoprefixer 根据设置浏览器版本自动处理浏览器前缀

4.gulp-cache 图片快取，只有更改过得图片会进行压缩

5.gulp-clean 清空文件夹

6.gulp-cssnano 压缩CSS代码

7.gulp-htmlmin 压缩html

8.gulp-if 用于判断

8.gulp-imagemin 图片压缩

9.gulp-load-plugins 自动加载（超级有用 省去一大堆代码）

10.gulp-plumber 管道工 不会让错误爆出来 继续执行

11.gulp-sass 预编译Sass

12.gulp-size 统计管道里面内容的大小的,上面是用它来显示出压缩前后的大小用来对比用

13.gulp-sourcemaps 当压缩的JS出错，能根据这个找到未压缩代码的位置 不会一片混乱代码

14.gulp-uglify JS压缩

15.gulp-useref 将html引用顺序的CSS JS 变成一个文件

例如： 最后变成

16.main-bower-files 找到bower.json里配置的 overrides 下配置的main下的路径

17.wiredep 在.html文件会把默认bower.json的配置自动注入到下面标签中去

接下来是用 bower安装 Jquery bootstrap-sass

bower init //新建bower.json
bower install jquery bootstrap-sass --save-dev //安装jquery bootstrap

二、get Gulp的简单语法

1.gulp.task(name[,deps],fn)

说明：定义一个gulp任务

name: 类型(必填)：String 指定任务的名称（不应该有空格）

deps:类型(可选)：StringArray，该任务依赖的任务（执行name任务要先去执行的任务）

gulp.task('A' , function{
   console.log('A') 
});
gulp.task('B' , ['A'] , function{ //运行B之前先去运行A
   console.log('B')
});

fn:类型(必填)：Function 该任务调用的插件操作

2.gulp.src(globs[, options])

说明：src方法指定需要处理的源文件路径，返回当前文件流至可用插件

globs: 类型(必填)：String/StringArray 需要处理的源文件匹配符路径

通配符路径匹配示例：

“src/a.js”：指定具体文件；

“*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；

“**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；

“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

options:类型(可选)：Object 三个属性 buffer read base

options.buffer：类型：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

options.read： 类型：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；

options.base： 类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接

gulp.src('client/js/**/*.js') 
  .pipe(minify)
  .pipe(gulp.dest('build'));  // Writes 'build/somedir/somefile.js'
 
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify)
  .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'

3.gulp.dest(path[,options])

说明：处理完后文件输出的路径

path：类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可

options： 类型(可选)：Object，有2个属性cwd、mode；

options.cwd： 类型：String 默认：process.cwd：前脚本的工作目录的路径 当文件输出路径为相对路径将会用到；

options.mode： 类型：String 默认：0777 指定被创建文件夹的权限；

4.gulp.watch(glob[,opts],tasks) or gulp.task(glob [,opts ,cd])

说明：watch方法用于监听文件变化，一被变化就执行指定任务

glob： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

opts： 类型(可选)：Object 具体参看
https://github.com/shama/gaze；

tasks： 类型(必填)：StringArray 需要执行的任务的名称数组；

cb(event)： 类型(可选)：Function 每个文件变化执行的回调函数；

三、目录

|--gulp_test
    |--app //生产文件路径
        |--fonts
        |--images
|--1.png |--scripts
|--main.js
|--index.js |--styles
|--main.scss
|--index.css |--index.html |--dist //发布文件路径 |--fonts |--images |--scripts |--styles |--index.html |--bower_components |--bootstrap-sass |--jquery |--node_modules |--各种插件 |--package.json |--bower.json

app是我们新建的目录和文件夹，其余是按照上面操作自动生成的。

首先在gulp_test下新建.babelrc (用于配置es6 语法) .bowerrc (用于定义bower的路径)两个文件

.babelrc

.bowerrc

{
  "directory": "bower_components"
}

设置一下bower.json

{
  "name": "gulp_test",
  "authors": [
    "QRL"
  ],
  "keywords": [
    "bower_components"
  ],
  "private": true,
  "devDependencies": {
    "jquery": "^3.0.0"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/*",
        "assets/javascripts/bootstrap.js"
      ]
    }
  },
  "dependencies": {"bootstrap-sass": "^3.3.6"}
}

app下的index.html内容



  
    
    
    
    test gulp webapp

    
    

       //注意一下这里
    
    
    
  
  
  
    

      

        
        
Hello

      


      

        
Hello Gulp!

        
Always a pleasure scaffolding your apps.

        
Splendid!

      


      

        

 
HTML5 Boilerplate

 
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

 
 
Sass

 
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

 
 
Bootstrap

 
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

 
Modernizr

 
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

 
        

      


      

        
? from the Yeoman team

      

    

    
    
    

     //这些注释可不是随意写的哦
    
    
    
    
    
     //注意一下这里 待会会按照顺序变成一个plugins.js文件
     //是否遇到过这么多的插件引用，Ctrl+c Ctrl+v 还要细致的修改  请留意 wiredep 任务  留意下面的注释，这可不是随随便便的注释

接下来最重要了，同样在gulp_test下新建gulpfile.babel.js（因为这里使用es6,所以需要将原本的gulpfile.js 更名为 gulpfile.babel.js ）

四、开始gulp之旅

打开gulpfile.babel.js，开始操作

首先写进以下代码：

import gulp from 'gulp'; //引入gulp
import gulpLoadPlugins from 'gulp-load-plugins'; //自动加载插件 省去一个一个require进来
import browserSync from 'browser-sync'; //浏览器同步
import {stream as wiredep} from 'wiredep'; //把bower 下载的文件引入到html文件中
const $ = gulpLoadPlugins;
const reload = browserSync.reload;

接下来

先尝试删除dist文件夹 终端运行 "gulp clean"

gulp.task('clean' , function{
   return gulp.src([
      'dist', //删除dist整个文件夹
      'dist/test/**/*', //删除dist下的test写任意子文件夹里的文件
      '!package.json'  //不删除package.json文件
     ] ).pipe($.clean);
});

预编译Sass

gulp.task('styles' , =>{
   return gulp.src('app/styles/*.scss') //指明源文件路径 读取其数据流
        .pipe($.plumber) //替换错误的pipe方法  使数据流正常运行
        .pipe($.sourcemaps.init) //压缩环境出现错误能找到未压缩的错误来源
        .pipe($.sass.sync({        //预编译sass
 outputStyle: 'expanded', //CSS编译后的方式
 precision: 10,//保留小数点后几位
 includePaths: ['.']
        }).on('error', $.sass.logError))
        .pipe($.autoprefixer({browsers:['> 1%', 'last 2 versions', 'Firefox ESR']}))     //自动匹配浏览器支持的后缀
        .pipe($.sourcemaps.write('.'))  //map文件命名
        .pipe(gulp.dest('dist/styles'))  //指定输出路径
});
../dist/styles目录下会生成 对应的 *.css 和 *.css.map

转化es6的JS

gulp.task('scripts' , =>{
    return gulp.src('app/scripts/**/*.js')
        .pipe($.plumber)
        .pipe($.sourcemaps.init)
        .pipe($.babel)    //靠这个插件编译
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/scripts'));     
});
../dist/scripts目录下会生成 对应的 *.js 和 *.js.map

压缩图片

gulp.task('images',=>{
    return gulp.src('app/images/**/*')
         .pipe ($.cache ($.imagemin ({ //使用cache只压缩改变的图片
 optimizationLevel: 3,         //压缩级别
 progressive: true, 
 interlaced: true})
         )).pipe (gulp.dest ('dist/images'));
});
通过对比图片大小，可以看出压缩了多少

引用字体文件

gulp.task('fonts',  => {
    return gulp.src(require('main-bower-files')('**/*.   {eot,svg,ttf,woff,woff2}', function (err) {})  //main-bower-files会从bower.json文件里寻找定义好的主要文件路径
        .concat('app/fonts/**/*'))  //将bootstrap-sass的fonts和app下我们自己选用的fonts合并起来
.pipe(gulp.dest('dist/fonts')); });
../dist/fonts目录下会生成 对应的文件

接下来是最最有用的操作，将CSS合并压缩，JS合并压缩，html压缩，加上时间戳避免缓存

gulp.task('html', ['styles' , 'scripts'], =>{   //先执行styles scripts任务
    var version = (new Date).valueOf + '';
    var options = {
        removeComments: false,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: false,//省略布尔属性的值  ==> 
        removeEmptyAttributes: false,//删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: false,//删除' , '.js?v=' + version + '">'))
        .pipe($.replace('.css">' , '.css?v=' + version + '">'))
        .pipe(gulp.dest('dist'));
});

是否还记得

是不是瞬间被吓到了，再也不用一个个压缩JS文件，再也不要担心缓存这种问题，再也不用因为页面的臃肿而烦恼，几行配置，一键搞定。

接下来再学一个黑魔法——本地建站和自动刷新

gulp.task('serve', ['styles','scripts','fonts'] , =>{
    browserSync({
        notify : false,
        port:9000,  //端口号
        server:{
 baseDir:['dist'], //确定根目录
 routes:{
 '/bower_components': 'bower_components'
 }
        }
    });

    gulp.watch([      //监测文件变化 实行重新加载
        'app/*.html', 
        'app/images/**/*' 
    ]).on('change',reload);

    gulp.watch('app/styles/**/*.scss' , ['styles']); //监测变化 执行styles任务
    gulp.watch('app/scripts/**/*.js' , ['scripts']);
    gulp.watch('app/fonts/**/*' , ['fonts']);
    gulp.watch('bower.json' , ['wiredep','fonts']);
});

终端一运行gulp serve 浏览器直接打开dist下的index.html，只要一修改监测的文件，浏览器立即刷新。

小插曲：接下来解决 wiredep任务，这个插件主要是用在bower下载文件，方便页面引用文件

首先在app下新建一个 index_test.html




    
    

    
    


    
Hellp wirdep

    dianwo

然后在gulpfile.babel.js中写上任务

gulp.task('wiredep_test' , function{
    gulp.src('./app/index_test.html')
    .pipe(wiredep({
 optional:'configuration',
 goes : 'here',
 ignorePath:/^(\.\.\/)+/      //生成的路径忽略../   
        }))
    .pipe(gulp.dest('./app'))    //输出到原路径
});

然后运行一下，index_test.html 原本的 变成

你或许很疑惑这是根据什么自动查找生成的啊？因为没有中文文档，自己摸索后是在bower.json里面配置的，review一下刚才的bower.json

  "devDependencies": {
    "jquery": "^3.0.0"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/*",
        "assets/javascripts/bootstrap.js"
      ]
    }
  },
  "dependencies": {"bootstrap-sass": "^3.3.6"}

根据以上三个根据，起最大作用的是overrides，最终会根据这些进行生成。

可以稍微测试一下，将bower.json做点小修改 ，增加jquery的选择

"overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/*",
        "assets/javascripts/bootstrap.js"
      ]
    },
    "jquery" :{
      "main":[
        "src/*.js"
      ]
    }
  }

回头看看index_test.html 刚才的jquery.js 被src下的js代替

最后一步，就结束了

gulp.task('build' , ['html' , 'images' , 'fonts'],=>{
    return gulp.src('dist/**/*')
    .pipe($.size({title:'build' , gzip:true}));
});

gulp.task('default' ,['clean'],=>{
    gulp.start('build');
});

这就是单独运行 gulp 就会执行default 然后执行我们想要的操作，同时可以根据size看到压缩后节省的空间。

感谢您坚持看完，一步步跟着做，你会发现gulp原来辣么容易，前端自动化工具辣么方便。

对于老项目也可以这样一步一步改造哦！

声明：上述的 二、get Gulp的简单语法 摘抄于 Gulp中文网的API文档。其余内容均属楼主一点一滴码出来的。

扫描二维码推送至手机访问。

版权声明：本文由ruisui88发布，如需转载请注明出处。

本文链接：http://www.ruisui88.com/post/711.html

标签: es6新增数组方法
分享给朋友：
返回列表

上一篇：JavaScript(ES6) Promise对象学习

下一篇：学习ES6- 入门Vue(大量源代码及笔记，带你起飞)

“前端自动化gulp遇上es6从 无知到深爱” 的相关文章

智慧校园平台解决方案-收费管理系统

收费管理系统简介：学生收费管理系统与教务系统，学工系统实现数据互通；实现网站支付功能，实现学生在家，在宿舍，只要能够上网即可通过支付宝，微信，网银对产生的订单进行支付。服务网大厅中的web网上查询使得数据查询更加便利，财务负责人通过平台查看学生收费情况，院系老师通过查询平台查询本院系实时收费情况等，...

深入理解Vue.js组件通信:父子组件与子父组件数据交互详解

什么是Vue组件通讯 Vue.js 组件通信是指在 Vue 应用的不同组件之间进行数据交换和状态同步的过程。由于 Vue 的组件是基于单文件组件（SFCs）的模块化设计，每个组件都有自己的作用域，因此它们不能直接访问彼此的数据。为了使组件之间能够协同工作，Vue 提供了几种不同的通信方式。以下是 V...

2021最全VUE面试题，奥利给

1. vue-router用过没，哪些常用的钩子函数路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。首页可以控制导航跳转， beforeEach ， afterEach 等，?般?于页? title 的修改。?些需要登录才能调整??的重定向功能。beforeEach 主要有3个参数...

gitlab 分支保护设置

一、功能描述代码管理中管理，我们把稳定的分支设置为保护，可以防止其他人员误操作（例如删除，合并，推送代码等）。二、Gitlab配置步骤1 点击项目Repository标签2.点击Expand标签3.配置如下：默认master是被保护的，而且只有维护人员具有推送和合并权限。设置保护分支，这里的beta...

BuildKit 镜像构建工具

#暑期创作大赛#快速开始 对于 Kubernetes 部署，请参阅examples/kubernetes。BuildKit 由buildkitd守护进程和buildctl客户端组成。虽然buildctl客户端可用于 Linux、macOS 和 Windows，但buildkitd守护程序目前仅适用于...

双子座应用程序推出模型切换器以在Android上访问2.0

#头条精品计划# 快速导读谷歌推出了Gemini 2.0 Flash实验版，现已在其安卓应用中可用，之前仅在gemini.google.com网站上提供。新版本的15.50包含模型切换器，用户可以在设置中选择不同模型，包括1.5 Pro、1.5 Flash和2.0 Flash实验版。谷歌提醒，2.0...

蜀ICP备2024111239号-14