gulp的基本使用

gulp

了解

首先我们了解一下什么是gulp, gulp是前端自动化构建工具,在开发过程中很多重复的任务，我们都可以正确的使用gulp来完成，gulp基于nodejs,使用gulp可以做很多事情

例如gulp转less语法，js压缩,css压缩,html压缩,下面我大体说一下这个gulp的主流程

gulp

• 官网
• gulp插件
• 中文网

---

gulp的主流程

• 首先你要安装nodejs环境.
• 全局安装gulp,然后你每次使用gulp的项目中还要安装一下gulp以及你在项目中所用到的插件也安装好.
• 然后你在运行该命令行的目录下新建一个名为gulpfile.js,并在里面写好配置信息，
• 然后再运行gulp任务就ok了

---

1.gulp的安装

• gulp安装前的环境配置
  • 安装gulp的前提是你已经经有了nodejs的运行环境，
  • 查看是否安装了nodejs,如果输出版本号，说明已经安装了node

node -v

• 如果没有安装node，就去官网下载一下安装即可node官方网站

• 以上步骤完成之后，先初始化一下npm init,然后再全局安装gulp

npm install -g gulp-cli

• 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp --save-dev

解释一下：--save-dev是package.json文件中的依赖，最好加上

---

2.使用gulp

• 安装完之后就是如何使用了，先在你这个目录下新建一个gulpfile.js的文件，里面写我们定义的任务，例如以下代码是对less转换为css的
  
  注意：你可以自己起一个任务名，运行的时候，直接在命令行输入gulp 任务名，gulp也给我们定义了一个默认任务名default,如果任务名为
  
  default,直接在命令行输入gulp即可

先引入包
const gulp = require('gulp')   //这个每次都要引入，在你使用插件的时候
const less = require('gulp-less')

// 定义任务对less进行转换,myless是你自己定义的任务名
gulp.task('myless', function() {
  // 1.匹配到要处理的文件，目录src/less/*.less下的所有后缀名为`.less`的所有文件
  gulp.src('src/less/*.less')
    // 2.对less语法进行转换!
    .pipe(less())
    // 3.指定文件的输出目录dist/css
    .pipe(gulp.dest('dist/css'))
})

---

3.gulp常用的插件

3.1 转换less语法

安装npm install gulp-less --save-dev

const less = require('gulp-less')

// 定义任务对less进行转换,myless是你自己定义的任务名
gulp.task('myless', function() {
  // 1.匹配到要处理的文件，目录src/less/*.less下的所有后缀名为`.less`的所有文件
  gulp.src('src/less/*.less')
    // 2.对less语法进行转换!
    .pipe(less())
    // 3.指定文件的输出目录dist/css
    .pipe(gulp.dest('dist/css'))
})

3.2 对 js 语法进行压缩和混淆

安装npm install gulp-uglify --save-dev

const uglify = require('gulp-uglify')

// 对js请求进行压缩和混淆
// 定义任务
gulp.task('myscript', function() {
  // 1.匹配要处理的文件
  gulp.src('src/js/*.js')
      // 2.将js代码压缩混淆
       .pipe(uglify())
       .pipe(gulp.dest('dist/js'))
})

3.3 对html代码进行压缩

安装npm install gulp-htmlmin --save-dev

// 对html进行压缩的包
const htmlmin = require('gulp-htmlmin')

// 对html进行压缩
// 定义任务
gulp.task('myhtml', function(){
   // 1.匹配到要处理的html文件
   gulp.src('src/*.html')
        // 2.对html进行压缩!
        .pipe(htmlmin({
          collapseWhitespace:true // 去除空白符
          }))
          // 3.输出
        .pipe(gulp.dest('dist'))
})

3.4 对css进行压缩

安装 npm install gulp-cssnano --save-dev

const cssnano = require('gulp-cssnano')

// 定义任务
gulp.task('mycss', function(){
     // 1.
     gulp.src('src/css/*.css')
     .pipe(cssnano())// 消化，转换，压缩
     .pipe(gulp.dest('dist/css'))
})

---

4.gulp的API

• gulp.task

  • 作用：定义一个任务:
  • 示例:

    •   gulp.task('任务名', function(){
           // 任务内容
        })
      

  • 执行: 在命令行,gulpfile.js所在目录执行 gulp 任务名

• gulp.src

  • 作用: 匹配到我们想要处理的文件!
  • 示例：

    •   gulp.task('任务名', function(){
            // 如: './style.less'
            // 如: './*.less'
            // 如: '*.*' // 当前目录的下所有文件!
            // 如: **/*.* // 当前目录所有目录下的所有文件
            这个参数还可以是一个数组
            gulp.src(['./stlyle.less','./test.less','*.*'])
            gulp.src('路径字符串')
            .pipe(less()) // 语法转换
            .pipe(gulp.dest('文件输出目录'))
            })
      

• gulp.dest('文件输出目录')

• gulp.watch

  • 作用：** 监视文件变化然后自动执行相应的任务!,不用每次都要敲命令**

    // 我们还自动监视文件变化，然后执行相应任务
gulp.task('mywatch', function(){
  // 监视指定文件的变化，如果变化就执行相应的任务!
   gulp.watch('src/**/*.*',['mycss','myhtml','myscript','myless'])
})

注意：这里输入的命令行的代码是gulp 任务名，在上面的代码中是gulp mywatch,千万不要和webpack混淆了

• gulp.run

// 我们可以新建一个任务，用这个任务去启动其他任务!
// 如果在命令行输入gulp 会直接执行当前目录的名为default的任务
gulp.task('default' ,function(){
  //console.log(1111)
  // run方法是用来执行其他任务
  // 参数是任务名,如果写成数组形式，那么数组中的元素就是要执行的任务名

  gulp.run(['mycss','myhtml','myscript','myless'])
})

假设你有好多文件需要打包，这样做的目的是为了你输入命令的时候，不用再输入好多文件名来执行了，直接输入gulp,就是新建一个任务default，用这个任务去启动其他任务

在gulp中也可以使用browser-sync

• 需要在当前项目目录安装:npm install browser-sync --save-dev
  
  这时候想把gulp和browser-sync合成一个命令，只能是把browser的命令省掉，用gulp来代替，那么命令省掉了，最终就要换成代码，如下所示

//启动boswerSync服务
       browserSync.init({
       server:"./src", //指定网站目录，访问时不需要 ，就是帮你自动刷新浏览器http://localhost:3000/后面
       //的目录，可以省略不写,*这里的路径一定要写对*
        files:["./src/**/*.*"]
           })

和watch合起来的代码：

//这个broserSync是自动帮你刷新浏览器
const browserSync = require('browser-sync')

//我们还自动监视文件变化，然后执行相应任务
gulp.task("mywatch",function(){
  //启动boswerSync服务
       browserSync.init({
       server:"./src", //指定网站目录，访问时不需要
       //输入这个目录(网站根目录就是端口号后面的目录的父级)
        files:["./src/**/*.*"]
           })
//    监视指定文件的变化，如果变化就自动执行相应的任务（想监视谁，就在数组里写谁）
   gulp.watch('src/**/*.*',['myless'])
  })

注意:如果更改了gulpfile.js文件要重启我们的任务!