如何用gulp实现一个项目的打包构建

最新推荐文章于 2022-05-25 19:16:36 发布
最新推荐文章于 2022-05-25 19:16:36 发布
阅读量477 收藏 1
点赞数
分类专栏： 前端工程化 文章标签： 前端工程化 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenyeqv/article/details/123347881
版权

项目目录结构如下

gulp-demo
├─ .gitignore
├─ gulpfile.js
├─ LICENSE
├─ package.json
├─ public
│  └─ favicon.ico
├─ README.md
└─ src
   ├─ about.html
   ├─ assets
   │  ├─ fonts
   │  │  ├─ pages.eot
   │  │  ├─ pages.svg
   │  │  ├─ pages.ttf
   │  │  └─ pages.woff
   │  ├─ images
   │  │  ├─ brands.svg
   │  │  └─ logo.png
   │  ├─ scripts
   │  │  └─ main.js
   │  └─ styles
   │     ├─ demo.scss
   │     ├─ main.scss
   │     ├─ _icons.scss
   │     └─ _variables.scss
   ├─ features.html
   ├─ index.html
   ├─ layouts
   │  └─ basic.html
   └─ partials
      ├─ footer.html
      ├─ header.html
      └─ tags.html

● 样式编译
○ 安装gulp
○ 在入口文件中配置：

const {src,dest} = require("gulp") 
// yarn add gulp-sass sass --dev
const sass = require("gulp-sass")(require('sass'))

const style = ()=>{
  //读入样式文件,base:src表示写入的文件保留src之后的文件层级
  return src('src/assets/styles/*.scss',{base:'src'})
  //将sass文件转换,且样式的括号打开
  .pipe(sass({outputStyle:'expanded'}))
  .pipe(dest('dist'))
}

module.exports = {
  style
}

● 脚本编译
○ 将es6编译成es5

const {src,dest} = require("gulp") 

//yarn add gulp-babel
//yarn add @babel/core @babel/preset-env --dev
const babel = require("gulp-babel")
// yarn add gulp-sass sass --dev
const sass = require("gulp-sass")(require('sass'))

const style = ()=>{
  //读入样式文件,base:src表示写入的文件保留src之后的文件层级
  return src('src/assets/styles/*.scss',{base:'src'})
  //将sass文件转换,且样式的括号打开
  .pipe(sass({outputStyle:'expanded'}))
  .pipe(dest('dist'))
}
const script = ()=>{
  return src("src/assets/scripts/*.js",{base:'src'})
  .pipe(babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))

}
module.exports = {
  style,
  script
}

● 模板文件编译
○ 将模板html文件渲染编译
○ 安装渲染模块yarn add gulp-swig

const page = ()=>{
  return src("src/**/*.html",{base:'src'})
  //渲染模板，传入数据
  .pipe(swig({data}))
  .pipe(dest('dist'))
  
}

● 对字体和图片的压缩
○ 安装插件：yarn add gulp-imagemin --dev
■ 版本太高可能报错：https://blog.csdn.net/qq_25972233/article/details/123045152


const image = ()=>{
 return src("src/assets/images/**",{base:'src'})
 .pipe(imagemin())
 .pipe(dest('dist'))
}

const font = ()=>{
 return src("src/assets/fonts/**",{base:'src'})
 .pipe(imagemin())
 .pipe(dest('dist'))
}

● 处理完src目录下的文件还需要处理public下的文件，这里的文件属于直接调用的文件，之间复制到dist目录中即可

const extra = ()=>{
 return src("public/**",{base:'public'})
 .pipe(dest("dist"))
}
const compile = parallel(style,script,page,image,font)
const bulid = parallel(compile,extra)

 ○ 通过build可以把文件全部打包到dist目录，但是每一次build前需要把之前的dist删除再重新生成，这里就需要一个删除文件夹的命令

○ 安装模块:yarn add del --dev

const del = ()=>{
  return del(['dist'])
}
const bulid = series(del,parallel(compile,extra))

● 自动加载插件
○ 随着插件越来越多，每一次引用导致代码太长不易维护
○ 使用模块：yarn add gulp-load-plugins --dev可以自动加载所有插件

const plugins = loadPlugins()

○ 删除gulp插件的引用，以后用到插件只需plugins.插件名

● 创建服务器热更新
○ 安装：yarn add browser-sync --dev
○ 引入模块之后，创建热更新任务

const serve = ()=>{
//bs为安装的模块
  bs.init({
      notify:false,//是否提示
      port:2080,
      //监听的文件，文件改变，浏览器刷新
      files:'dist/**',
      server:{
            //指定网站根目录
          baseDir:'dist',
          routes:{
              //dist中html文件引入node_modules中的模块，这里告诉浏览器如果html中有/node_modules，就直接去根目录下的node_modules中找，后面会将node_modules中需要的文件提取到dist中
              '/node_modules':'node_modules'
          }
      }

  })
}

○ serve中配置的是对打包好的dist下的监听，在实际上线前，如何对开发环境进行监听呢？
■ 可以借助gulp中的watch模块
■ 在serve运行的时候，监听src目录下的变化，同时调用之前的任务打包对应的变化
■ 值得注意的是，我们通常会监听js、css等文件变化，而图片字体的变化一般监听的时候不会让它进行打包，因为很耗费性能，只在最后上线的时候才打包，那么如何保证dist目录中存在这个字体和样式以便被网站显示呢？
■ 其实既然不打包，dist中就不必出现这些文件，只需要修改serve中的baseDir监听，对src或public下的文件也进行搜索，当dist中的文件引用不存在，会依次向src搜索

const serve = ()=>{
 //监听
 watch('src/assets/styles/*.scss',style)
 watch("src/assets/scripts/*.js",script)
 watch("src/**/*.html",page)
//下面的资源文件监听，服务器执行刷新命令即可
 watch([
     "src/assets/images/**",
     "src/assets/fonts/**",
     "public/**"
 ],bs.reload)

 bs.init({
     notify:false,//是否提示
     port:2080,
     //监听的文件，文件改变，浏览器刷新
     files:'dist/**',
     server:{
           //指定网站根目录
         baseDir:['dist','src','public'],
         routes:{
             //dist中html文件引入node_modules中的模块，这里告诉浏览器如果html中有/node_modules，就直接去根目录下的node_modules中找，后面会将node_modules中需要的文件提取到dist中
             '/node_modules':'node_modules'
         }
     }

 })
}

● useref文件引用处理
○ html中link标签引入很多css文件，这些文件的路径有的是开发者规定好的，有的则在node_modules下
○ 可以使用gulp-useref来提取这些文件，并将它们合并到一起

const useref = ()=>{
  return src("dist/*.html",{base:'dist'})
  //搜索的位置，本项目css文件，一般在dist,node_modules中
  .pipe(plugins.useref({ searchPath:['dist','.'] }))
  .pipe(dest('dist'))
}

● 文件资源压缩
○ 打包之后我们发现html、css、js没有压缩
○ yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev 分别安装html js css压缩模块
○ 我们将插件放在useref任务中，当扫描html文件时，就可以对引用的文件进行压缩
○ 在扫描时，需要对文件类型进行判断，安装yarn add gulp-if插件实现

const useref = ()=>{
  return src("dist/*.html",{base:'dist'})
  //搜索的位置，本项目css文件，一般在dist,node_modules中
  .pipe(plugins.useref({ searchPath:['dist','.'] }))
  //判断是否.js结尾文件并压缩
  .pipe(plugins.if(/\.js$/,plugins.uglify()))
  .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
  .pipe(plugins.if(/\.html$/,plugins.htmlmin({
      collapseWhitespace:true, //压缩空格
      minifyCSS:true,//压缩行内样式
      minifyJS:true //压缩内部js
  })))
  .pipe(dest('release'))
}

● 重新规划构建流程
○ 可以看到，我们之前打包到dist目录的文件只是中间文件，最后要经过useref压缩之后才是最后的文件，如果想要最后文件为dist，就需要规划一个临时文件夹存放打包的文件，然后最后压缩到dist目录中

const {src,dest,parallel,series,watch} = require("gulp") 
const loadPlugins = require("gulp-load-plugins")
const sass = require("gulp-sass")(require("sass"))
const del = require("del")
const bs = require("browser-sync")
const plugins = loadPlugins()

const clean = ()=>{
  return del(['dist','temp'])
}

const style = ()=>{
  //读入样式文件,base:src表示写入的文件保留src之后的文件层级
  return src('src/assets/styles/*.scss',{base:'src'})
  //将sass文件转换,且样式的括号打开
  .pipe(sass({outputStyle:'expanded'}))
  .pipe(dest('temp'))
}
const script = ()=>{
  return src("src/assets/scripts/*.js",{base:'src'})
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('temp'))
}

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}
const page = ()=>{
  return src("src/**/*.html",{base:'src'})
  //渲染模板，传入数据
  .pipe(plugins.swig({data}))
  .pipe(dest('temp'))
  
}

const image = ()=>{
  return src("src/assets/images/**",{base:'src'})
  .pipe(plugins.imagemin())
  .pipe(dest('dist'))
}

const font = ()=>{
  return src("src/assets/fonts/**",{base:'src'})
  .pipe(plugins.imagemin())
  .pipe(dest('dist'))
}
const extra = ()=>{
  return src("public/**",{base:'public'})
  .pipe(dest("dist"))
}
const serve = ()=>{
  //监听
  watch('src/assets/styles/*.scss',style)
  watch("src/assets/scripts/*.js",script)
  watch("src/**/*.html",page)
  //下面的资源文件监听，服务器执行刷新命令即可
  watch([
      "src/assets/images/**",
      "src/assets/fonts/**",
      "public/**"
  ],bs.reload)

  bs.init({
      notify:false,//是否提示
      port:2080,
      //监听的文件，文件改变，浏览器刷新
      files:'dist/**',
      server:{
            //指定网站根目录
          baseDir:['temp','src','public'],
          routes:{
              //dist中html文件引入node_modules中的模块，这里告诉浏览器如果html中有/node_modules，就直接去根目录下的node_modules中找，后面会将node_modules中需要的文件提取到dist中
              '/node_modules':'node_modules'
          }
      }

  })
}
const useref = ()=>{
  return src("temp/*.html",{base:'temp'})
  //搜索的位置，本项目css文件，一般在dist,node_modules中
  .pipe(plugins.useref({ searchPath:['temp','.'] }))
  //判断是否.js结尾文件并压缩
  .pipe(plugins.if(/\.js$/,plugins.uglify()))
  .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
  .pipe(plugins.if(/\.html$/,plugins.htmlmin({
      collapseWhitespace:true, //压缩空格
      minifyCSS:true,//压缩行内样式
      minifyJS:true //压缩内部js
  })))
  .pipe(dest('dist'))
}
const compile = parallel(style,script,page)
const build = series(clean,parallel( series(compile,useref), extra,image,font))
const develop = series(compile,serve) 
module.exports = {
  compile,
  build,
  serve,
  develop,
  useref
}
问也去
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
gulp打包项目案例代码
02-21
此项目为一个简单的gulp打包项目，可供刚入门同学学习使用。使用到了nodejs、sass、gulp等基础知识，
gulp打包普通项目
weixin_30861797的博客
02-28 257
第一步：npm init 生成一个page.json第二步建立一个gulpfile.js文件主要是写这个文件 var gulp = require('gulp'), rev = require('gulp-rev-append'), fs = require('fs'), fse = require('fs-extra'), path = requir...
gulp项目打包
过客匆匆，恍如烟
06-23 538
在打包工具中最简单实用的打包工具还是gulp，gulp打包 的应用平台基于node.js ，我们先看看一个基本的静态资源路径。 使用gulp 之前我们需要安装node.js 通过npm install gulp -g  （全局安装）npm init  进行初始化npm   install   gulp   --save-dev  (项目中实用gulp)        4.在根
NodeJS、NPM安装配置步骤(windows版本)
weixin_34342578的博客
08-10 107
1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到首页的“INSTALL”按钮，直接点击就会自动下载安装了。 2、安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\P...
Gulp打包构建项目
sennyla的博客
08-28 3292
打包压缩js,css,支持sass编译成css,图片压缩，图片组建成精灵图，静态文件拷贝，实时监听变化自动刷新浏览器 //引入相关插件 var gulp = require('gulp'); var rename = require('gulp-rename'); //文件重命名 var uglify = require('gulp-uglify'); //JS代码压缩 var minC...
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
10-19
test for angular and gulp and unit testing
gulp:使用 Gulp 完成项目的自动化构建
05-09
使用说明：npm install// 安装依赖// 命令配置npm run clean === gulp clean // 清理文件夹npm run compile...npm install gulp打包css 文件：安装 scss 编译文件： npm install gulp-sass --save-dev执行gul
gulp3-project:一个由gulp3构建的项目
05-17
一个基于gulp3构建的项目 构建步骤 全局安装gulp (sudo) npm i -g gulp@3 安装项目依赖 npm install 开发环境 npm run dev 生产环境 npm run build 项目教程 gulp构建项目（十）：gulp-rev-collector-dxb添加版本号...
nodejs实现简单的gulp打包
12-23
忙了一个月，项目初见雏形，也基本可以1.0上线了，趁着等文案的时间，简单写点gulp打包的东西，等明儿有空再来一篇详细的，再有空再来个webpack的，哎呀，这个有空也不知道是啥时候，莫怪，好像又废话了几句。...
gulp打包项目配置
需要点灵感
07-20 222
gulpfile.js var gulp=require('gulp'); var htmlMin = require('gulp-htmlmin') //压缩html var uglify = require('gulp-uglify');//压缩js var babel=require('gulp-babel');//es6转es5 var cleanCSS=require('gulp-clean-css');//压缩css var imagemin = require('gulp-imagemin
gulp打包及发布静态资源流程
08-10
gulp打包及发布静态资源流程
gulp自动打包工具
01-04
利用gulp打包工具
使用gulp打包普通项目
weixin_30655219的博客
03-26 173
前言： 　　在使用gulp打包工具之前，我做的H5项目在浏览器中的缓存是很严重的，若改了一点css，加了一句js代码，不手动清除浏览器缓存是看不到效果的。老总也在项目演示当中遇到这些问题，一查找原因却是缓存问题，于是老总多次要求得解决这个问题，不能每次遇到这个问题，你去叫客户清下缓存。于是我就在找解决问题的方法，一开始是想着如何可以动态的给引入的文件后面加上时间戳参数，试了一下貌似不行，就选择花...
gulp打包（含第三方模块下载教学）
qq_45799465的博客
02-26 4034
目录 一、创建项目文件夹 二、项目文件夹初始化 三、 依赖包的下载 3.1 事前准备 3.2全局依赖包的下载 3.2.1 下载gulp全局依赖包 3.2.2 下载全局 node-sass依赖包 3.3 开发依赖包的下载 3.3.1 下载gulp开发依赖包 3.3.2 css文件打包压缩依赖包 3.3.3JavaScript文件 打包压缩需要的依赖包 3 3.3.4html文件打包压缩需要的依赖包 3.3.5sass文件 打包压缩需要的依赖包 ...
gulp 打包 _ 最新 - 完整版
Mr.小灰狼_随笔
08-05 4287
2021年 8 月份 更新版 , 使用建议观看 目录 1. 认识 gulp 2. gulp打包项目的工作流程 3. gulp 使用前的准备工作 4.gulp第三方包的常用方法: 5. 配置打包任务 1.配置打包css的任务 2.配置打包 sass的任务 最新版打包 sass 任务总结 : 3.配置打包 js 的任务 打包 js任务总结 : 1. 认识 gulp +是一个前端打包工具 +打包 : => 代码转码压缩混淆 +gulp的...
gulp打包支持es6
前端劝退工程师
03-30 2050
1、全局安装babel。使用命令 npm install -g babel 和npm install -g babel-cli 2、本地安装gulp-babel。 npm install --save-dev gulp-babel 3、安装babel 辅助插件。 npm install --save-dev babel-preset-env 4、安装babel 辅助插件。 npm install --save-dev babel-core babel-preset-es2015 5、在项目
gulp打包全攻略
Mr-yang的随笔
07-01 3008
虽然文章很长，但内容绝不冗余~ 目录 gulp 的下载 第三方模块 完整代码 书写 gulp 打包的配置文件，需要按照 node 的 模块化 语法规则进行书写 gulp 的下载 如果你想使用 gulp 对你的项目进行打包 1. 需要安装一个全局工具 => 打开命令行, 目录无所谓 => 输入指令: $ npm install --global gulp => 作用: 在你的电脑内安装一个环境, 让你可以在命令行书写 gulp xxx 这样的指令 ...
gulp项目自动化打包构建工具
Joker0322的博客
05-25 539
生产环境：用户访问的项目环境 开发环境：开发人员进行程序代码开发使用的环境 一、gulp项目自动化打包构建工具 --操作对象 项目 --构建打包 将开发环境写的代码构建打包部署到生产环境 二、使用 1、安装gulp 全局安装使用gulp命令： npm i gulp -g 本地安装使...
nodejs glup打包工程问题
波子汽水
10-25 266
在Windows上面跑项目，需要安装nodejs打包项目。遇到的问题 D:\Belle_worlk\member-front-nodejs\frontend>gulp build-mymareket ReferenceError: primordials is not defined at fs.js:36:5 at req_ (D:\Belle_worlk\member-front-nodejs\frontend\node_modules\natives\index.js:143:2
gulp怎么用webpack替换
最新发布
05-12
Gulp主要用于自动化构建任务，如编译LESS、压缩JS、CSS等，而Webpack则是一个模块打包工具，可以将各种类型的文件打包成浏览器可读的代码。因此，如果你想使用Webpack替换Gulp，需要将Gulp的构建任务转化成Webpack的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问也去

创作不易，感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值