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

    
    

       //注意一下这里
    
    
    
  
  
  
    
      
        
 Home
 About
 Contact
        
        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文档。其余内容均属楼主一点一滴码出来的。

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

Gulp是什么？

一、安装各种神奇的插件

二、get Gulp的简单语法

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

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

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

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

三、目录

Hello

Hello Gulp!

HTML5 Boilerplate

Sass

Bootstrap

Modernizr

四、开始gulp之旅

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?

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

Gulp是什么？

一、安装各种神奇的插件

二、get Gulp的简单语法

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

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

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

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

三、目录

Hello

Hello Gulp!

HTML5 Boilerplate

Sass

Bootstrap

Modernizr

四、开始gulp之旅

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?

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