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文件要重启咱们的任务!