gulp的简介以及使用方法

Posted 2021-03-18 zhaoxinran997

环境介绍：

pro环境：生产环境，面向外部用户的环境，连接上互联网即可访问的正式环境。

pre环境：灰度环境，外部用户可以访问，但是服务器配置相对低，其它和生产一样。

test环境：测试环境，外部用户无法访问，专门给测试人员使用的，版本相对稳定。

dev环境：开发环境，外部用户无法访问，开发人员使用，版本变动很大。

项目文件的部署

--|src (dev环境 开发环境)
    --| html 
    --| css
    --| images
    --| js
          --| js (直接写js代码的文件)
          --| lib(类库 jquery)
          --| plug(插件)
    --| data

--| dist  (pro)
    --| html
    --| css
    --| images
    --| js

gulp的目的

打包一个项目

gulp的作用

• 自动压缩JS文件
• 自动压缩CSS文件
• 自动合并文件
• 自动编译sass es6
• 自动压缩图片
• 自动刷新浏览器

gulp的使用

• gulp依赖于node环境
• 在全局安装gulp环境,说明机器上可以运行gulp
  • cnpm install gulp@3.9.1 -g
• 在每个gulp项目 依赖gulp
• 在项目开始之前先初始化 package.json文件 , 命令 : cnpm init -y (全局安装)
  • 注意 : cnpm install [包] --save 装生产环境依赖
  • 注意 : cnpm install [包] --save-dev 装开发环境依赖

gulp的配置

• 在项目根目录下创建一个js文件 , 文件名称gulpfile.js gulp的配置文件

  //引入模块
  const gulp = require('gulp');
  
  
  //异步执行：文件的转存 ： 把src/html里面的index.html 转存到 dist/html/
  gulp.task('copyfile',() => {
      //文件的转存
      //找到文件所在的路径
      gulp
   //执行命令 ： gulp copyfile   
   .src('./src/html/index.html')
          //转存
          .pipe(gulp.dest('./dist/html'))
  })

gulp指令

task() 创建gulp任务

参数1 ; 任务的名称
参数2 : 当前任务依赖的其他任务 ['任务1','任务2']
参数3 : 回调函数 当前任务所执行的代码

src() 找到文件的路径

pipe() 管道函数

dest() 文件的转存

watch() 监听

参数1 : 监听哪些文件发生变化
参数2 : 文件变化的时候执行哪些任务 ['任务1','任务2]

监测

扩展src匹配

1. 单个文件 : "./src/js/1.js"

2. 匹配所有文件 : " * " ./src/*.js src下所有的js文件

3. 匹配0个或多个子文件夹 "**"

   src/**/*.js  src下面的0个或者多个子文件夹里的js文件

4. 匹配多个属性 : {}

src/*.{jpg,png,gif}  src下面所有的jpg png gif

gulp 拷贝文件

 const gulp = require('gulp');
 
 文件的转存 ： 把src/html里面的index.html 转存到 dist/html/
    gulp.task('marge',() => {
        //文件的转存
        //找到文件所在的路径
        gulp
            .src('./dist/css/*')
            //转存
            .pipe(gulp.dest('./dist/marge'))
    })

gulp 图片的压缩

const imgmin = require('gulp-imagemin');

第一次压缩的命令：cnpm install gulp-imagemin --save-dev

gulp.task('imgMin',() => {
    gulp
        //路径的查找
        .src('./src/images/*.png')
        .pipe(imgmin())  //执行压缩
        .pipe(gulp.dest('./dist/images'))
})

添加浏览器前缀
npm install --save-dev gulp-autoprefixer

gulp js文件压缩

const jsmin = require('gulp-uglify');

第一次压缩：cnpm install gulp-uglify --save-dev

//js压缩
gulp.task('jsMin',() => {
    gulp
        .src('./src/js/js/*.js')
        .pipe(jsmin())  //js压缩
        .pipe(gulp.dest('./dist/js'))
})

gulp css文件压缩

const cssmin = require('gulp-clean-css');

第一次命令：cnpm install gulp-clean-css --save-dev

//css文件的压缩
gulp.task('cssMin',() => {
    gulp
        .src('./src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})

gulp文件的合并

const concat = require('gulp-concat');

第一次命令 : cnpm install gulp-concat --save-dev

//文件的合并
gulp.task('conCat',() => {
    gulp
        .src('./src/js/js/{demo1,demo2}.js')
        .pipe(concat('all.js')) //并的文件的名称
        .pipe(jsmin())
        .pipe(gulp.dest('./dist/js'))
})

es6转义

es6代码不能直接压缩 要先转义 再压缩

const es6 = require('gulp-babel');

第一次命令 : cnpm install --save-dev gulp-babel @babel/core @babel/preset-env

//es6编译
gulp.task('ES6',() => {
    gulp
        .src('./src/js/js/demo1.js')
        .pipe(es6({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('./dist/js'))
})

gulp 添加浏览器前缀

const autofixer = require('gulp-autoprefixer');

第一次命令 : cnpm install gulp-autoprefixer --save-dev 

var gulp = require("gulp");  //引入gulp
var autoprefixer = require("gulp-autoprefixer");  //引入插件

//gulp autoFx 自动添加css浏览器兼容前缀，并将添加后的最终.css文档保存在dist文件夹中
gulp.task("autoFx",function(){
    gulp.src("*.css")
        .pipe(autoprefixer())
        .pipe(gulp.dest("dist/"))
})

gulp 开启服务

gulp.task('server',() => {
    serverstart.server({
        //路径
        root : './',
        port : 8888,
        livereload : true
    })
})

npm install --save-dev gulp-webserver
gulp.task('webserver',() => {
    gulp.src('./src')
    .pipe(webserver({
        livereload : true,
        proxies:[
            {
            source : ''
            target : ""
          }
        ]
    }))
})

出口任务

 gulp.task('default',['imgmin','jsmin','cssmin'])

watch封装

gulp.task('ddd',() => {
    // return watch('./src/css/style.css',() => {
    //     gulp.start('cssMin');
    // })
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
    gulpWatch('./src/css/style.css','cssMin')
})
//监听多个文件的变化，执行多个任务
//封装起来

function gulpWatch(src,task){
    return watch(src,() => {
        gulp.start(task)
    })
}