Gulp自动化构建打包工具

最新推荐文章于 2024-05-21 21:24:27 发布
最新推荐文章于 2024-05-21 21:24:27 发布
阅读量403 收藏
点赞数 2
文章标签： gulp node.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43989621/article/details/120241085
版权

Gulp自动化构建打包工具

gulp是一个项目开发的自动化构建打包工具，基于node环境来运行的

官网：https://www.gulpjs.com.cn/

在这里插入图片描述

一、什么是自动化打包构建工具

  • 我们在开发的过程中，会写到js ,css 等文件
  • 我们的项目如果想上线，那么一定要体积小一点，文件越小越好
  • 而我们写的js ,css 文件的时候，会有很多 换行/空格 之类的东西
  • 而这些 换行/空格 都是占文件体积的一部分
  • 那么我们在上线之前就要把这些 空格/换行 删除掉，但我们又不可能一个一个的去删除
  • 就要用到一个自动化工具来帮助我们把这些多余的东西干掉

常见的自动化打包工具

gulp webpack

二、安装GULP

  • gulp 是一个依赖于node 的环境工具

  • 所以我们需要安装一个 全局gulp 依赖

  • 直接使用npm 去安装

    # 使用npm安装全局依赖 gulp
$ npm install --global gulp

  • 检查是否安装成功

    $ gulp --version

三、使用GULP

1.项目目录结构

在这里插入图片描述

注意：所有的代码都必须放在src 这个文件夹下

2.在项目文件夹下执行npm初始化

在 gulp_demo 下初始化

$ npm init -y

3.执行完毕之后，再来看看我们的项目目录

在这里插入图片描述

会多一个package.json文件

四、项目GULP配置

1.安装gulp

  • 之前已经安装过gulp 全局依赖了

  • 但是每一个项目都要安装一次gulp 的项目依赖

  • 因为每一个项目的打包构建规则都不一样，所以不能全都配置成一个

  • 所以我们要在项目里再次进行gulp 安装

    还是进入项目文件夹gulp_demo下安装

    $ npm i -D gulp

    项目中的gulp依赖要和全局gulp环境保持一致

2.项目进行打包构建配置

在项目目录下新建一个gulpfile.js

在这里插入图片描述

接下来我们就在gulpfile.js文件里进行配置，让我们的打包构建可以生效

五、GULP API

在进行项目打包之前，要先了解一下GULP的一些API，方便以后的打包操作和理解

1.task()

每个gulp任务都是一个异步JavaScript函数

//创建名为css的任务
gulp.task('css',function(){
    //执行任务代码
})

2.src()

创建一个流，用于从文件系统中读取对象

3.dest()

创建一个用于将数据对象写入到文件系统的流

4.pipe()

字面意思，管道，接受上一个流的结果，并返回一个处理后流的结果。

举个栗子🌰

//定义一个copy任务，将src/js目录下的js文件复制到output目录下
gulp.task('copy',function(){
    return gulp.src('./src/js/*.js')
    .pipe(gulp.dest('output/'))		//当没有output文件夹时，会自动创建
})

5.series()

将任务函数和/或组合操作组合成更大的操作，这些操作将按照顺序依次执行

gulp.series('js','css')		//先执行js这个任务，在执行css任务

gulp.task('test',gulp.series('copy','js'))

6.parallel()

将任务功能和/或组合操作合成 同时执行 的较大操作。对于使用series() 和parallel() 进行嵌套组合的深度没有强制限制

gulp.parallel('js','css')		//js任务和css任务同时执行

gulp.parallel('test',gulp.series('copy','js'))

7.watch()

监听 文件系统 并在文件发生改变时执行

gulp.watch('./src/css/**',gulp.parallel('css'))

六、打包操作

学习了解完gulp的API，现在开始打包我们的项目

1.打包css文件

  1. 在gulpfile.js里引入gulp

    //我是gulpfile.js文件
//1.引入gulp
const gulp = require('gulp')

  2. 下载第三方依赖包gulp-cssmin

    # 在项目文件下下载gulp-cssmin第三方依赖
$ npm i -D gulp-cssmin

  3. 下载完毕后，去文件中进行配置

    //我是gulpfile.js文件
//1.引入gulp
const gulp = require('gulp')
//2.引入gulp-cssmin
const cssmin = require('gulp-cssmin')
//3.创建一个css的任务
gulp.task('css',function(){
    return gulp.src('./src/css/*.css')	//对哪些文件进行操作，这里是对css文件操作
    	.pipe(cssmin())		   //做什么操作，这里是进行css压缩
    	.pipe(gulp.dest('./dist/css'))  //把压缩完的文件放在dist文件夹下	
})

  4. 执行css任务 ，直接在控制台使用命令

    # 表示运行gulpfile.js配置文件中的 css 任务
$ gulp css
    • 执行完毕以后，就会在gulp_demo 目录下生成一个dist 文件夹
    • 里面就有我们压缩好的css 文件

2.打包SASS文件

  • 任务：

    1. 把sass 解析成css
    2. 压缩一下
    3. 放到对应的文件夹中

  • 下载第三方依赖包gulp-sass

    # 在项目文件下下载gulp-sass第三方依赖
$ npm i -D gulp-sass

  • 配置文件

    //2-1.引入gulp-sass
const sass = require('gulp-sass')
//2-2创建一个sass任务
gulp.task('sass',function(){
    return gulp.src('./src/sass/**')
    	.pipe(sass())
    	.pipe(cssmin())
    	.pipe(gulp.dest('./dist/css'))
})

  • 执行任务

    # 执行 sass 任务
$ gulp sass

3.打包JS文件

打包js文件需要四个包，一个是压缩js文件的包，三个是编译ES6语法的包

打包js文件

  1. 下载第三方依赖包gulp-uglify

    # 在项目文件下下载gulp-uglify第三方依赖
$ npm i -D gulp-uglify

  2. 配饰文件

    //3-1.引入gulp-uglify
const uglify = require('gulp-uglify')
//3-2创建一个js任务
gulp.task('js',function(){
    return gulp.src('./src/js/*.js')
    	.pipe(uglify())
    	.pipe(gulp.dest('./dist/js'))
})

  3. 执行js任务

    gulp js

编译ES6语法

ES6转ES5需要的三个依赖

  1. 下载第三方依赖包

    npm i -D gulp-babel@7.0.1
npm i -D babel-core
npm i -D babel-preset-es2015

  2. 配置文件

    //3-1引入gulp-babel
// ES6转ES5虽然需要下载三个依赖，但只需要引入一个gulp-babel就可以了
const babel = require('gulp-babel')
//3-2创建一个js任务
gulp.task('sass',function(){
    return gulp.src('./src/js/*.js')
        .pipe(babel({
        	presets:['es2015']
    }))
    	.pipe(uglify())
    	.pipe(gulp.dest('./dist/js'))
})

  3. 执行任务

    gulp js

4.打包html文件

  1. 下载第三方依赖包gulp-htmlmin

    # 在项目文件下下载gulp-htmlmin第三方依赖
$ npm i -D gulp-htmlmin

  2. 配饰文件

    //4-1.引入gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
//3-2创建一个js任务
gulp.task('html',function(){
    return gulp.src('./src/pages/*.html')
        .pipe(htmlmin({
        removeEmptyAttibutes:true,	//移出所有空属性
        collapseWhitespace:true	//压缩html
    }))
    	.pipe(gulp.dest('./dist/pages'))
})

  3. 运行html任务

    gulp html

4.处理LIB和STATIC文件

这些都是第三方的一些文件和一些图片之类的信息

不需要压缩处理，只需要转到我们的dist文件夹下就可以了

  1. 配置文件

    //5创建一个lib任务
gulp.task('lib',function(){
    return gulp.src('./src/lib/**')
    	.pipe(gulp.dest('./dist/lib'))
})
//6创建一个static任务
gulp.task('static',function(){
    return gulp.src('./src/static/**')
    	.pipe(gulp.dest('./dist/static'))
})

  2. 执行lib和static任务

    # 执行 lib 任务
$ gulp lib
# 执行 static 任务
$ gulp static

5.按顺序批量执行任务series()

当我们任务太多时，一个任务一个任务的执行太费时间，我们可以批量的执行任务

series() 将任务按顺序执行

exports.default 暴露一个默认任务

根目录运行默认任务，只需要执行 gulp 命令

exports.default = gulp.series('css','sass','js','html','lib','static')	//按顺序依次执行

执行任务

# 执行默认任务
$ gulp

6.同时批量执行任务parallel()

parallel() 多个任务同时执行

exports.default 暴露一个默认任务

根目录运行默认任务，只需要执行 gulp 命令

exports.default = gulp.parallel('css','sass','js','html','lib','static')	//同时执行

执行任务

# 执行默认任务
$ gulp

7.清除dist文件夹

  • 当你在编译的时候，如果第一次编译有一个叫做a.css 的文件,他会帮你编译
  • 后来你把a.css 文件改了名字，改成了b.css 文件，再次进行编译的时候
  • 会给你新生成一个叫做b.css 文件在dist 文件夹中
  • 之前的a.css 文件也不会消失
  • 那这样就不是很好
  • 我们比较好的做法是
    1. 在执行所有编译之前
    2. 先把 dist 文件夹清除掉
    3. 然后再执行所有的编译

  1. 下载第三方依赖包gulp-clean

  2. 配置文件

    //引入 gulp-clean
const clean = require('gulp-clean')
//创建一个 clean 任务
gulp.task('clean',function(){
    return gulp.src('./dist',{allowEmpty:true})	//当dist目录不存在时
    	.pipe(clean())
})

  3. 先执行 clean 任务，在执行默认任务

    # 执行 clean 任务
$ gulp clean
# 执行默认任务
$ gulp	//当没有dist文件夹时，会自动创建dist文件夹

8.清除配置完成默认任务

series将任务按顺序执行和parallel同时执行 嵌套执行

exports.default = gulp.series('clean', gulp.parallel('css', 'sass', 'js', 'html', 'lib', 'static'))
//先清除dist文件夹，在执行打包任务

9.自动打开浏览器

  1. 下载第三方依赖包gulp-webserver

  2. 配置文件

    //引入 gulp-webserver
const webserver = require('gulp-clean')
//创建一个 webserver 任务
gulp.task('webserver',function(){
    return gulp.src('./dist')	
        .pipe(webserver({
        host:'localhost',	//配置打开浏览器的域名
        port:8080,		//配置打开浏览器的端口号
        livereload:true		//自动刷新浏览器
        open:'./pages/index.html'	//默认打开dist文件夹下的那个文件
    }))
    	.pipe(clean())
})

    exports.default = gulp.series('clean', gulp.parallel('css', 'sass', 'js', 'html', 'lib', 'static'),'webserver')

10修改内容自动刷新

在制作一个任务，当文件夹下的内容修改的时候，自动帮我们重新编译

不需要任何依赖，只需要配置一个监听文件的任务就可以了

创建一个watch任务

//创建一个watch任务
gulp.task('watch', function () {
    //gulp.watch('./src/css/**', gulp.parallel('css'))
    //gulp.watch('./src/sass/**', gulp.parallel('sass'))
    //gulp.watch('./src/js/**', gulp.parallel('js'))
    //gulp.watch('./src/pages/**', gulp.parallel('html'))
    //gulp.watch('./src/lib/**', gulp.parallel('lib'))
    //gulp.watch('./src/static/**', gulp.parallel('static'))
    
    gulp.watch('./src/**',gulp.series('clean', gulp.parallel('css', 'sass', 'js', 'html', 'lib', 'static')))
})

改写成默认任务

exports.default = gulp.series('clean',
       gulp.parallel('css', 'sass', 'js', 'html', 'lib', 'static'),
       gulp.series('webserver','watch'))

运行任务

gulp

  • 这个时候，我们只要进行代码书写就可以了
  • 代码发生改变，会帮我们自动打包编译，并且自动进行浏览器刷新

GULP完整配置文件

gulpfile.js文件内容

const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const sass = require('gulp-sass')(require('sass'));
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-uglify')
 
// 3-2. 引入 gulp-babel
//      es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了
const babel = require('gulp-babel')
 
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
 
// 5. 引入 gulp-clean
const clean = require('gulp-clean');
 
// 7. 引入 gulp-webserver
const webserver = require('gulp-webserver')
 
gulp.task('css', function () {
    return gulp.src('./src/css/**')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})
 
 
gulp.task('sass', function () {
    return gulp.src('./src/sass/**')
        .pipe(sass())
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})
 
// 3. 创建一个 js 任务
gulp.task('js', function () {
    return gulp
        .src('./src/js/**')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
})
 
// 4. 创建一个 html 任务
gulp.task('html', function () {
    return gulp
        .src('./src/pages/**')
        .pipe(htmlmin({
            removeEmptyAttibutes: true, // 移出所有空属性
            collapseWhitespace: true // 压缩 html
        }))
        .pipe(gulp.dest('./dist/pages'))
})
 
 
gulp.task('lib', function () {
    return gulp.src('./src/lib/**')
        .pipe(gulp.dest('./dist/lib'))
})
 
gulp.task('static', function () {
    return gulp.src('./src/static/**')
        .pipe(gulp.dest('./dist/static'))
})
 
// 8. 创建一个 clean 任务
gulp.task('clean', function () {
    return gulp
        .src('./dist', {
            allowEmpty: true
        }) // {allowEmpty: true} dist目录不存在时配置
        .pipe(clean())
})
// 9. 创建一个 webserver 任务
gulp.task('webserver', function () {
    return gulp
        .src('./dist')
        .pipe(webserver({
            host: 'localhost', // 配置打开浏览器的域名
            port: 3000, // 配置打开浏览器的端口号
            livereload: true, // 自动刷新浏览器
            open: './pages/index.html' // 默认打开 dist 文件夹下的哪个文件
        }))
})
// 10. 创建一个 watch 任务
gulp.task('watch', function () {
    gulp.watch('./src/css/**', gulp.parallel('css'))
    gulp.watch('./src/sass/**', gulp.parallel('sass'))
    gulp.watch('./src/js/**', gulp.parallel('js'))
    gulp.watch('./src/pages/**', gulp.parallel('html'))
    gulp.watch('./src/lib/**', gulp.parallel('lib'))
    gulp.watch('./src/static/**', gulp.parallel('static'))
})
 
 
exports.default = gulp.series('clean', 
     gulp.parallel('css', 'sass', 'js', 'html', 'lib', 'static'), 
     gulp.series('webserver','watch'))
敲代码好难
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
程序自动打包工具
07-17
使用delphi开发的自动打包工具，将打包脚本粘贴到程序目录的wiseScripts目录下，使用的打包程序是Wise Installation System
gulp打包工具
前端小99的博客
09-14 288
npm install -g gulp
（CICD）自动化构建打包、部署(Jenkins + maven+ gitlab+tomcat)
最新发布
weixin_50382197的博客
05-21 1200
在本文档中，我们将概述持续集成，持续交付和持续部署的概念，以及GitLab CI / CD的介绍。软件开发的连续方法基于自动执行脚本，以最大限度地减少在开发应用程序时引入错误的可能性。从新代码的开发到部署，它们需要较少的人为干预甚至根本不需要干预。它涉及在每次小迭代中不断构建，测试和部署代码更改，从而减少基于有缺陷或失败的先前版本开发新代码的机会。这种方法有三种主要方法，每种方法都根据最适合您的策略进行应用。Devops持续集成。
gulp项目自动化打包构建工具
Joker0322的博客
05-25 554
生产环境：用户访问的项目环境 开发环境：开发人员进行程序代码开发使用的环境 一、gulp项目自动化打包构建工具 --操作对象 项目 --构建打包 将开发环境写的代码构建打包部署到生产环境 二、使用 1、安装gulp 全局安装使用gulp命令： npm i gulp -g 本地安装使...
前端自动化工具gulp.zip
12-24
**标题**: 前端自动化...总的来说，Gulp是一个强大且灵活的前端自动化工具，它简化了构建过程，使得前端开发更加高效。通过理解并熟练运用Gulp，开发者可以更好地管理项目，提升开发效率，同时确保代码的质量和性能。
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
10-19
test for angular and gulp and unit testing
用自动化构建工具增强你的工作流程！基于流stream的自动化构建工具Gulp+Grunt项目构建
03-26
自动化构建工具Grunt_实现watch监视任务实现自动打包编译.avi (2)\Gulp即学即用；目录中文件数:8个 ├─01.自动化构建工具Gulp_入门介绍.avi ├─02.自动化构建工具Gulp_构建js.avi ├─03.自动化构建工具Gulp_构建...
gulp自动打包工具
01-04
**gulp自动打包工具** 在现代前端开发中，自动化构建工具起着至关重要的作用，它们能够极大地提高开发效率，简化重复性工作。其中，`gulp`就是一款流行的任务管理器，它允许开发者通过编写简单的JavaScript任务来...
gulp自动化
07-11
自动化构建工具，多设备同时刷新，babel es6编译，打包发布，版本号添加，资源压缩
自动打包工具
04-19
NULL 博文链接：https://lumingming1987.iteye.com/blog/1870266
开发自己的打包工具.rar
06-18
Dim c As String '文件记录,大小 'WriteFile 把哪个文件写进去，写到哪个文件里面去 Sub WriteFile(AppName As String, AppExeName As String) Dim i As Integer, i2 As Integer, BB() As Byte, CC() As Byte '读出文件1到BB i = FreeFile
Gulp打包工具
MUYI_JIQIE的博客
06-19 180
用自动化构建工具增强你的工作流程！
项目打包之gulp 打包工具
weixin_43314255的博客
03-11 897
我们在做项目的时候，往往一个项目将要上线的时候都涉及到项目打包，即使不是一个完整的项目。小型未完成的项目在上线的时候我们也可以进行打包，打包项目可以大大压缩我们的项目体积。 比如我们在写js和css代码的时候，为了美化好看，我们往往会进行缩进换行，一来好看，二来也是符合我们正常人的编程思维。项目打包就是把文件中多余的东西去掉，比如换行，空格之类的。大大压缩我们的代码体积，这是我们打包项目较大的意义之处了。 常见的打包工具有两种 gulp打包工具 webpack 打包工具 这里我们只介绍有关gulp工具相关
Gulp(一个老式自动化打包工具)
weixin_47121832的博客
08-07 170
Gulp(一个老式自动化打包工具)
自动打包工具--xctool
qinguo2000的专栏
03-06 869
前面介绍了HomeBrew的安装 现在通过命令：sudo brew install xctool完成xctool的安装 xctool是FaceBook开源的一个命令行工具，用来替代苹果的xcodebuild工具。 参数： -workspace 需要打包的workspace 后面接的文件一定要是.xcworkspace 结尾的 -scheme 需要打包的Scheme
JavaScript打包工具之Gulp
TSORA-C的博客
10-14 354
JavaScript打包工具之Gulp $ npm install --global gulp $ npm install --save-dev gulp // gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); $ gulp
构建工具与打包
weixin_51446342的博客
12-02 306
构建工具与打包
前端开发利器：Gulp自动化构建详解
"本文档主要介绍了gulp的详细使用方法，...gulp是一个强大的自动化工具，它简化了前端开发的流程，使得代码的优化和构建更加高效。通过学习和熟练使用gulp，开发者可以更好地管理和优化他们的项目，从而提高工作效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值