gulp

最新推荐文章于 2024-12-26 10:35:51 发布

anyw_

最新推荐文章于 2024-12-26 10:35:51 发布

阅读量124

点赞数

分类专栏： webpack 文章标签： gulp

本文链接：https://blog.youkuaiyun.com/qq_44862403/article/details/107417244

版权

webpack 专栏收录该内容

2 篇文章

订阅专栏

gulp

gulp的配置过程

1_建立一个项目文件夹

需要建立一个项目文件夹,作为项目目录,所有的文件都要定义在这个文件夹中

2_项目规范

在这个项目文件夹中,按照项目规范,来设定文件夹目录结构

一般项目源文件都存储在一个指定的文件夹中一般叫 src

压缩文件都存储在龙一个指定文件夹中一般叫 dist

src中按照文件类型存储在不同的文件夹中

pages 存储HTML文件

css 存储css文件

js 存储js文件

images 存储图片

…

最终的目的是,将src文件夹中的源文件,打包压缩,存储在 dist 文件夹中

3_要执行的基本的准备工作

3-1,准备好文件夹

配置gulp选项时,文件夹路径是一项关键的配置

最开始,必须要设定好相关的文件夹

3-2,先执行 npm init -y 自动配置初始化文件

在当前项目文件夹中,会自动生成一个配置文件 package.json

3-3,手动创建一个js文件,名称必须定义为 gulpfile.js

文件位置必须是项目文件夹中,不要定义在 src 等文件夹中

3-4,每一种格式文件,要打包压缩,都要执行不同的规范

就要给每一种需要打包的文件,设定打包规范

每个不同项目,打包规范,也会有明确的规范,实际项目中,按照项目手册执行就可以

我们目前先按照一般打包规范来设定

需要设定规范的文件格式

这里的压缩规范,都是通过第三方依赖包来执行的,必须要下载相应的依赖包

`CSS`

gulp-cssmin css压缩规范

gulp-autoprefixer css自动添加兼容前缀

注意

在执行 gulp-autoprefixer 时, 必须要在 package.js 文件中设定配置

"browserslist": [
    "last 2 versions",
    "IOS > 7",
    "FireFox > 20"
  ]

HTML

gulp-htmlmin HTML压缩规范

`JS`

gulp-uglify js的压缩规范,只能压缩ES5语法规范的内容

gulp-babel 将其他ES语法规范,转化为ES5语法

服务器

gulp-webserver 服务器压缩规范

独立的删除规范

del 多次压缩,要先删除之前压缩的文件内容

音频,视频,图片等,一般是不压缩的,直接移动到 dist 文件夹中

实际项目中,按照项目手册执行

添加其他插件依赖包

常用的gulp方法

导入gulp第三方依赖包

生成的gulp对象中,有 gulp 的打包压缩方法,我们只要使用就可以了

1_`gulp.src()`

指定要执行gulp打包压缩文件路径的方式

2_`gulp.pipe()`

执行第三方依赖包定义的打包压缩规范,以及相应的程序内容

gulp的语法规范规定,必须要使用gulp.pipe()来执行相应的程序内容

3_`gulp.dest()`

将压缩打包好的程序,移动至指定的文件夹位置中

4_`gulp.watch()`

指定监听路径中的文件,如果文件内容保存,会自动执行程序

5_`gulp.series()`

用来执行多个任务

逐个执行()中添加的程序内容,添加的必须是函数的名称,不能是函数的执行,不能有()

6_`gulp.parallel`

同时执行()中添加的程序内容,添加的必须是函数的名称,不能是函数的执行,不能有()

`gulpfile.js`

//1 导入gulp
const gulp = require('gulp');
//2 导入del
const del = require('del'); 
//3 导入gulp-autoprefixer
const autoprefixer = require('gulp-autoprefixer')
//4 导入gulp-cssmin
const cssmin = require('gulp-cssmin')
//5 导入gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
//6 导入gulp-babel
const babel = require('gulp-babel')
//7 导入gulp-uglify
const uglify = require('gulp-uglify')
//8 导入gulp-webserver
const webserver = require('gulp-webserver')

//书写关于css压缩的规则
const cssHandler = ()=>{
    return gulp.src('./src/css/*.css')
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
}

//书写关于html压缩的规则
const htmlHandler = ()=>{
    return gulp.src('./src/pages/*.html')
    .pipe(htmlmin({
        removeAttributeQuotes:true,//移除属性上的双引号
        removeComments:true,//移除注释
        collapseWhitespace:true,//移除所有空格,会变成一行代码
        minifyCSS:true,//把页面里面style标签里面的css样式也去空格
        minifyJS:true,//把页面里面script标签里面的js代码也去空格
        collapseBooleanAttributes:true//把值为布尔值的属性简写
    }))
    .pipe(gulp.dest('./dist/pages'))
}

//书写关于js压缩的规则
const jsHandler = ()=>{
    return gulp.src('./src/js/*.js')
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())  //uglify不认识es6,一定要先转语法,再压缩
    .pipe(gulp.dest('./dist/js'))
}
//书写关于lib的移动的规则
const libHandler = ()=>{
    //我打算把src处理完成以后,都放到dist文件夹下
    return gulp.src('./src/lib/*.js')
    .pipe(gulp.dest('./dist/lib'))
}
//书写关于images的移动的规则
const imagesHandler = ()=>{
    return gulp.src('./src/images/**') //"**"表示images下面的所有文件
    .pipe(gulp.dest('./dist/images'))  
}
//书写关于删除的规则
const delHandler = ()=>{
    return del(['./dist'])
}

//书写webserver的规则
const webserverHandler = ()=>{
    return gulp.src('./dist')   //找到要作为服务器根目录的文件夹
    .pipe(webserver({
        port:8090,//端口号,0-6635之间,尽量不要用0-1023
        open:'./pages/index.html',//你默认打开的首页,路径从dist开始书写
        livereload:true,//热更新,就是当dist里面代码有变化的时候自动刷新浏览器
        proxies:[ //这个第三方模块还可以帮助我们配置代理
            //直接在使用webserver的时候添加一个配置项:   proxies:[]
            {
                source: '/abc', //表示请求的地址
                target: 'http://127.0.0.1/json.php'//你要代理的地址
            },
            {
                source: '/eee', //表示请求的地址
                target: 'http://127.0.0.1/json.php'//你要代理的地址
            }
        ]
    }))
}

//书写自动监控任务
const watchHandler = ()=>{
    /*
        当我在src里面书写代码的时候,只要我修改我的代码,就会被gulp监听到,
        一旦监听到,就重新帮我删除以前的和压缩现在的,一旦压缩,dist文件夹里面内容就变化了
        变化了以后服务器就会热更新
    */
    gulp.watch('./src/css/*.css',cssHandler);
    gulp.watch('./src/js/*.js',jsHandler);
    gulp.watch('./src/pages/*.html',htmlHandler);
    gulp.watch('./src/images/**',imagesHandler);
    gulp.watch('./src/lib/**',libHandler)
}
// 任务导出
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(libHandler,imagesHandler,cssHandler,htmlHandler,jsHandler),
    webserverHandler,
    watchHandler
)

`package.json`

{
  "name": "zhangsanshop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-webserver": "^0.9.1"
  },
  // 在执行 gulp-autoprefixer 时, 设定配置添加兼容前缀
  "browserslist": [
    "last 2 versions",
    "iOS > 7",
    "FireFox < 20",
    "last 2 Explorer versions"
  ]
}