gulp.js简易入门指南

Tools
总计 1006 字
目录

gulp简单来讲，是一个基于流的自动化构建工具，听起来有点奇怪，但是简单理解就是前端工程化工具，它的出现使得我们能够将一些操作或者处理工作直接交给工具去做，充分提高了开发的效率，基于流的意思是通过数据流的方式读取，处理然后再输出到文件

为什么需要gulp?

  • 模块化我们的html,css,js文件，使得项目的结构更加的清晰
  • 转译我们的模块文件（例如：js es6->es5 , panini->html ,Sass->css,）
  • 图片及css文件的压缩处理极大的提高网页性能
  • 解决各种浏览器兼容性问题
  • 基于管道思想的pipe多重处理，你可以自定义你想要的处理任务，一切交给gulp自动完成

准备工作

必备：npm包管理器

流程：

  1. 在项目目录下进行 npm init -y

  2. npm install gulp –save-dev 作为项目依赖安装

  3. 项目根目录下新建文件gulpfile.js

  4. 在gulpfile.js中写入你要gulp为你自动化处理的任务

var gulp = require('gulp')     //请求gulp模块

gulp.task('name', function(){   //给gulp的任务，任务名+任务会执行的函数
    //执行的任务
})

命令行中执行gulp name的时候，gulp就会自动找到你自己定义的那个任务

gulp能做得更多

管道理念

简单来讲，你的任务一定会有源文件，管道相当于处理方法，管道可以接多条，管道的尽头就是输出文件

我们有专门的文件夹来存放我们的源文件和输出文件，它们的目录分别为src和dist

gulp本身也给我们提供了很多现成的管道，官网有许多的plugin可以用，上面都有示例代码

我们可以用npm像安装模块一样把它们一一安装，在node中一切皆模块，npm可以快速的帮助我们运用这些已经写好的模块作为我们的一个个管道

gulp管道的使用方法

这里以sass编译任务为例：

var gulp = require('gulp')
var sass = require('gulp-sass') //完整的模块名,请求模块

gulp.task('sass', () => {   //注意node支持es6的语法
    gulp.src('./src/源文件目录.sass')    //告诉gulp我们想要处理的文件
        .pipe(sass())   //将sass处理方法封装成管道
        //.pipe 处理1
        //.pipe 处理2
        .pipe(gulp.dest('./dist/css/'))     //最后将管道导向输出，也就是输出目录当中生成输出文件
})

添加gulp观察者以便对源文件的更改进行实时处理

gulp.task('watch',() => {
    gulp.watch('追踪更改的文件目录',['每次更改保存就执行的task'])
})

附：

  • 任务名若为default命令行中直接输入gulp就会立即执行
  • gulp.task(‘default’, [‘styles’, ‘jshint’, ‘watch’])

gulp可以进行多任务,让一个任务同时调用多个任务

  • 在指定目录中可以用*号和后缀匹配目录下的全部同类型文件
gulp.src('js/**/*.js')