大前端基础【3-1笔记】Gulp自动化构建

最新推荐文章于 2024-08-23 09:44:02 发布
最新推荐文章于 2024-08-23 09:44:02 发布
阅读量198 收藏 2
点赞数
分类专栏： 拉钩教育
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/115190983
版权

文章内容输出来源：拉勾教育大前端就业急训营2期；

1、Gulp与npm scripts

  • 两者都能实现自动化构建
  • Gulp语法简单，语法就是JavaScript语法。npm script接近shell脚本
  • Gulp生态完善，构建效率高

2、Gulp基本使用

官网：https://gulpjs.com/

1.安裝
npm install gulp-cli -g
npm install gulp -D
2、创建gulpfile.js（项目根目录）
// 创建gulp函数
const task1 = (cb) => {
  console.log("task1 is running");
  cb();
}

const task2 = (cb) => {
  console.log("task2 is running");
  cb();
}
//导出
module.exports = {
  task1,  // gulp task1
  default: task2  //gulp || gulp default，默认执行task2
};

旧版声明方式

//旧版声明语法,不需要导出(导出会报错)，直接 gulp task3
const gulp = require("gulp");

gulp.task("task3", (cb) => {
  console.log("task3 is running");
  cb();
})

3、Gulp组合任务

并行、串行

创建task

const gulp = require("gulp")

const task1 = (cb) => {
  setTimeout(()=>{
    console.log("task1 is running")
    cb();
  }, 1000)
}

const task2 = (cb) => {
  setTimeout(()=>{
    console.log("task2 is running")
    cb();
  }, 1000)
}

const task3 = (cb) => {
  setTimeout(()=>{
    console.log("task3 is running")
    cb();
  }, 1000)
}
1、并行

场景：构建js与css互不影响，可以同时构建（gulp.paralle（t1,t2,t3））

//并行
module.exports.p = gulp.parallel(task1, task2, task3);
2、串行

场景举例：先把less转成css，再将css转化为（gulp.serise（t1,t2,t3））

//串行
module.exports.s = gulp.series(task1, task2, task3);

4、Gulp文件操作

Gulp是基于流的构建任务

  • 输入------> 加工------->输出
  • 读取流------>转换流------> 写入流
  • gulp.src()---------->pipe()--------->gulp.dist()
const gulp = require("gulp")

//解构引入
const {src, dest} = require("gulp")

//声明gulp任务，注意：流就是异步操作，所以不需要写回调函数了
const style = () => {
  // return gulp.src("src/styles/main.less").pipe(gulp.dest("dist"));
    
    
  //src指的是要参考src下的文件目录
  // return gulp.src("src/styles/main.less", {base: 'src'}).pipe(gulp.dest("dist"));
    
  //解构以后
  return src("src/styles/main.less", {base: 'src'}).pipe(dest("dist"));
}

// 导出
module.exports = {
  style
}

5、构建样式文件

1、转换less，

npm install gulp-less，使用pipe进行匹配https://www.npmjs.com/package/gulp-less

const {src, dest}  = require("gulp")
const less = require('gulp-less');


const style = () => {
  return src("src/styles/main.less", {base: 'src'}).pipe(less()).pipe(dest("dist"))
}

module.exports = {
  style
}
2、压缩文件，

npm install gulp-clean-css --save-dev

const style = () => {
  return src("src/styles/main.less", {base: 'src'})
  .pipe(less())
  .pipe(cleanCSS())
  .pipe(dest("dist"))
}
3、重命名

npm install gulp-rename --save-dev

const style = () => {
  return src("src/styles/main.less", {base: 'src'})
  .pipe(less())
  .pipe(cleanCSS())
  .pipe(rename({
    "extname": ".min.css"
  }))
  .pipe(dest("dist"))
}
4、autoPrefixed
CSS Hack
1、cssHack是什么？

针对不同的浏览器写相应的css的代码，这个过程叫做：CSS Hack;

2、目的：

Css Hack的目的就是使你的CSS代码兼容不同的浏览器

css代码存在兼容性问题，同一段css代码，在不同浏览器上呈现的效果不同。

3、出现的原因

出现这个问题的根本原因就是各个浏览器的渲染引擎不一样，不同的渲染引擎对同一段css代码的解释可能不一样。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxTbDRCT-1616601016259)(C:\Users\ROG\AppData\Roaming\Typora\typora-user-images\image-20210324151529119.png)]

autoprefixed

插件自动添加前缀，实现各个浏览器都兼容的写法。并不是所有的属性都添加前缀，会根据caniuse.com中的数据来决定哪些属性需要添加前缀

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RSjNj348-1616601016262)(C:\Users\ROG\AppData\Roaming\Typora\typora-user-images\image-20210324154456164.png)]

安装autoprefixed：

npm i gulp-autoprefixer -D

gulp.file编写

const {src, dest}  = require("gulp")
const less = require('gulp-less');
const cleanCSS  = require("gulp-clean-css")
const rename = require("gulp-rename")
const prefixer = require("gulp-autoprefixer")

const style = () => {
  return src("src/styles/main.less", {base: 'src'})
  .pipe(less())
  .pipe(prefixer()) //使用prefixer
  // .pipe(cleanCSS())
  // .pipe(rename({
  //   "extname": ".min.css"
  // }))
  .pipe(dest("dist"))
}

module.exports = {
  style
}

less文件

@color: red;

body{
  background-color: @color;
  user-select: none; /*存在兼容性問題*/
}

执行gulp style,得到dist文件夹下边的文件如下：

body {
  background-color: red;
  
  /*
  * 兼容性问题
  */
  -webkit-user-select: none; /*针对谷歌和safari*/
     -moz-user-select: none; /*针对火狐*/
      -ms-user-select: none; /*针对ie浏览器*/
          user-select: none;
}

6、构建脚本文件

1、es6语法转化

安装gulp-babel：https://www.npmjs.com/package/gulp-babel

确定自己的babel版本，执行不同的命令（babel -- version）查看自己的babel版本

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

编写gulpfile.js

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

// 声明脚本构建任务
const script = () => {
  return src("src/js/main.js", {base: 'src'})
  .pipe(babel({
    // presets: ['@babel/env'] // babel7的写法
    presets: ['babel-preset-env']  //babel6的写法
  })) 
  .pipe(dest('dist')) 
} 


module.exports = {
  script
}

执行gulp script，

2、压缩js代码
npm i gulp-uglify -D

编写gulp.file

const uglify = require("gulp-uglify")

// 声明脚本构建任务
const script = () => {
  return src("src/js/main.js", {base: 'src'})
  .pipe(uglify())
  // .pipe(babel({
  //   // presets: ['@babel/env'] // babel7的写法
  //   presets: ['babel-preset-env']  //babel6的写法
  // })) 
  .pipe(dest('dist')) 
}

执行gulp script，

3、重命名
npm install gulp-rename --save-dev

编写gulp.file

const rename = require("gulp-rename")

// 声明脚本构建任务
const script = () => {
  return src("src/js/main.js", {base: 'src'})
  .pipe(uglify())
  .pipe(rename({
      "extname": ".min.js"
    })) 
  .pipe(dest('dist')) 
}

执行gulp script，

7、构建Html

1、安裝

參考：https://www.npmjs.com/package/gulp-htmlmin

npm i gulp-htmlmin -D
2、gulpfile.js
const htmlmin = require("gulp-htmlmin")
const html = () => {
  return src("src/index.html", {base: 'src'})
  .pipe(htmlmin({
     collapseWhitespace: true ,
     minifyCSS: true,
     minifyJS: true
    }))
  .pipe(dest('dist'))  
}
3、并行
const build = parallel(style, script, html)
4、导出
module.exports = {
  build
}

8、构建图片文件

默认的压缩是无损压缩，学习网址：https://www.npmjs.com/package/gulp-imagemin

1、安装
npm i gulp-imagemin -D
2、gulpfile.js
const imagemin = require("gulp-imagemin")

const image = () => {
  return src("src/img/**")
  .pipe(imagemin([
      imagemin.mozjpeg({quality: 75, progressive: true}),
  ]))
  .pipe(dest('dist'))  
}

module.exports = {
    image
}
3、执行

gulp image
注意：如果执行不成功，按照附录操作即可。

9、文件清除

1、安装
npm i del -D
2、gulp.file
const del = require("del")

const clean = () => {
  return del(["dist"]);
}

module.exports = {
    clean
}
3、执行

gulp clean

10、gulp服务器

官网：https://browsersync.io/

1、安装
 npm i browser-sync -D
2、gulpfile.js
const browserSync = require("browser-sync")
const bs = browserSync.create()

const serve = () => {
  bs.init({
    server: {
     
      baseDir: './dist'  //指定服务启动的目录
    }
  })
}

module.exports = {
   serve
}
3、執行

gulp serve

11、安装bootstrap

安装

npm i jquery bootstrap@3.4.1 -S

html配置

<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>

gulpfile.js 配置：

const serve = () => {
  bs.init({
    notify: false,  //禁用浏览器右上角的 browserSync
    server: {
      baseDir: './dist',  //指定服务启动的目录
      routes:{
        "/node_modules": 'node_modules'  //注意：一定要配置路由
      }
    },
  })
}

12、热部署

配置gulpfile.js,执行任务监视，然后重启服务即可

const serve = () => {
  // watch 被监视的文件，执行对应的任务
  watch('src/index.html', html)
  watch('src/styles/*.less', style)
  watch('src/js/*.js', script)
  watch('src/img/**', image)
  
  bs.init({
    notify: false,  //禁用浏览器右上角的 browserSync
    files: 'dist/**',  // 监视dist下文件的变化
    server: {
      baseDir: './dist',  //指定服务启动的目录
      routes:{
        "/node_modules": 'node_modules' 
      }
    },
  })
}

如果图片构建不成功，见此处

附录

1. Win10 配置 hosts

  1. 通过vscode 打开 hosts 文件

    # hosts 文件的路径
C:\Windows\System32\Drivers\etc

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lAcQGDP1-1616601190843)(C:\Users\changtaoliu\AppData\Roaming\Typora\typora-user-images\image-20201006182128887.png)]

  2. 添加 Guthub 相关的内容

    将下面的内容复制，然后追加到 hosts 文件的尾部

    # GitHub Start (chinaz.com) =================================================
13.229.188.59 github.com
54.169.195.247 api.github.com
140.82.113.25 live.github.com
8.7.198.45 gist.github.com

# 185.199.108.154 github.githubassets.com
# 185.199.109.154 github.githubassets.com
185.199.110.154 github.githubassets.com
# 185.199.111.154 github.githubassets.com

34.196.247.240 collector.githubapp.com
# 52.7.232.208 collector.githubapp.com
52.216.92.163 github-cloud.s3.amazonaws.com

199.232.96.133 raw.githubusercontent.com
151.101.108.133 user-images.githubusercontent.com

151.101.108.133 avatars.githubusercontent.com
151.101.108.133 avatars0.githubusercontent.com
151.101.108.133 avatars1.githubusercontent.com
151.101.108.133 avatars2.githubusercontent.com
151.101.108.133 avatars3.githubusercontent.com
151.101.108.133 avatars4.githubusercontent.com
151.101.108.133 avatars5.githubusercontent.com
151.101.108.133 avatars6.githubusercontent.com
151.101.108.133 avatars7.githubusercontent.com
151.101.108.133 avatars8.githubusercontent.com
151.101.108.133 avatars9.githubusercontent.com
151.101.108.133 avatars10.githubusercontent.com
151.101.108.133 avatars11.githubusercontent.com
151.101.108.133 avatars12.githubusercontent.com
151.101.108.133 avatars13.githubusercontent.com
151.101.108.133 avatars14.githubusercontent.com
151.101.108.133 avatars15.githubusercontent.com
151.101.108.133 avatars16.githubusercontent.com
151.101.108.133 avatars17.githubusercontent.com
151.101.108.133 avatars18.githubusercontent.com
151.101.108.133 avatars19.githubusercontent.com
151.101.108.133 avatars20.githubusercontent.com
# GitHub End ===================================================================

  3. 保存文件

    ctrl+s 保存，此时如果报：没有权限，点击以管理员身份重试

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f73022T8-1616601190845)(C:\Users\changtaoliu\AppData\Roaming\Typora\typora-user-images\image-20201006182306289.png)]

2. Mac 配置 hosts

  1. 打开终端

  2. 输入 sudo vi /etc/hosts

  3. 输入密码

  4. 进入文件 hosts，然后按 “i”，进入编辑模式

  5. 把你的内容添加到最后

    # GitHub Start (chinaz.com) =================================================
13.229.188.59 github.com
54.169.195.247 api.github.com
140.82.113.25 live.github.com
8.7.198.45 gist.github.com

# 185.199.108.154 github.githubassets.com
# 185.199.109.154 github.githubassets.com
185.199.110.154 github.githubassets.com
# 185.199.111.154 github.githubassets.com

34.196.247.240 collector.githubapp.com
# 52.7.232.208 collector.githubapp.com
52.216.92.163 github-cloud.s3.amazonaws.com

151.101.108.133 raw.githubusercontent.com
151.101.108.133 user-images.githubusercontent.com

151.101.108.133 avatars.githubusercontent.com
151.101.108.133 avatars0.githubusercontent.com
151.101.108.133 avatars1.githubusercontent.com
151.101.108.133 avatars2.githubusercontent.com
151.101.108.133 avatars3.githubusercontent.com
151.101.108.133 avatars4.githubusercontent.com
151.101.108.133 avatars5.githubusercontent.com
151.101.108.133 avatars6.githubusercontent.com
151.101.108.133 avatars7.githubusercontent.com
151.101.108.133 avatars8.githubusercontent.com
151.101.108.133 avatars9.githubusercontent.com
151.101.108.133 avatars10.githubusercontent.com
151.101.108.133 avatars11.githubusercontent.com
151.101.108.133 avatars12.githubusercontent.com
151.101.108.133 avatars13.githubusercontent.com
151.101.108.133 avatars14.githubusercontent.com
151.101.108.133 avatars15.githubusercontent.com
151.101.108.133 avatars16.githubusercontent.com
151.101.108.133 avatars17.githubusercontent.com
151.101.108.133 avatars18.githubusercontent.com
151.101.108.133 avatars19.githubusercontent.com
151.101.108.133 avatars20.githubusercontent.com
# GitHub End ===================================================================

  6. control+c 退出编辑模式

  7. 输入 :wq，保存退出

小球学前端
关注
专栏目录
大前端学习--开发脚手架与自动化构建工作流封装
爱玲姐姐的博客
06-24 1560
开发脚手架与自动化构建工作流封装 去年6月24号开始工作，到今天刚好一周年了，纪念一下，分享最近学习的前端工程化笔记。 一、前端工程化 前端工程化是指遵循一定的标准和规范，通过工具去提高效率、降低成本的一种手段。 1. 前端开发中遇到的问题 想要使用ES6+新特性，但是兼容有问题 想要使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持 想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持 部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器 多人
前端构建工具Grunt&Gulp&webpack笔记
LiuKairui的博客
01-17 742
包含了前端主要构建工具,主讲:尚硅谷{'张晓飞','熊键'},视频来自B站:{'BV18s411E7gQ', 'BV18s411E7T5', 'BV1e7411j7T5'}
gulp-sample:示例 gulp 配置以调试 autoprefixersourcemapssasswhatever..
07-14
任务 有2个任务 gulp doesWork gulp doesntWork 运行gulp将同时运行 文件 源文件是src/sample.scss 目标文件是dest/doesWork/sample.css[.map]和dest/doesntWork/sample.css[.map] 问题 工作的sample.css.map包含"sourcesContent": ["...some code here..."]而非工作的sample.css.map包含"sourcesContent": [null]
gulp教程之gulp-autoprefixer
kaosini的专栏
01-29 3038
简介： 使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】 1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1、gulp基本使用还未掌握？请参
Gulp Autoprefixer 使用指南
最新发布
gitblog_00077的博客
08-23 338
Gulp Autoprefixer 使用指南 gulp-autoprefixerPrefix CSS项目地址:https://gitcode.com/gh_mirrors/gu/gulp-autoprefixer 项目介绍 Gulp Autoprefixer 是一个基于 Gulp 的自动化工具，用于处理 CSS 样式，自动添加浏览器前缀到 CSS 属性值中。这个开源项目由 Sindre Sor...
gulp 插件之 gulp-autoprefixer
weixin_34238642的博客
08-22 184
gulp-autoprefixer 的简介： gulp-autoprefixer 插件用来自动给 css 文件样式添加浏览器前缀。一、gulp-autoprefixer 插件的使用1、安装 “gulp-autoprefixer”插件命令（在终端进入到项目根目录执行） npm install --save-dev gulp-load...
gulp-autoprefixer
weixin_30247307的博客
03-10 88
1、安装gulp-autoprefixer 命名行输入npm install gulp-autoprefixer --save-dve; 2、配置文件 var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'); gulp.task('testAutoFx', function () {...
gulp自动化构建工具入门教程
gulp是一个基于Node.js的自动化任务运行器，它被广泛应用于前端工程化的构建过程，能够帮助开发者执行诸如测试、代码检查、文件合并、压缩、格式化、实时浏览器刷新以及文件改动后的自动重跑任务等功能。通过定义和...
JavaScript个人博客网站 - 前端笔记网站
03-07
JavaScript个人博客网站是一种基于Web技术实现的在线平台，主要用于分享技术知识、个人心得或...此外，该项目也可能包含构建工具（如Gulp、Grunt或Webpack），自动化任务如压缩图片、编译SCSS等，进一步提升开发效率。
gulp学习笔记
04-09
在IT行业中，构建工具起着至关重要...通过学习和熟练使用Gulp，开发者可以自定义各种任务，实现项目的自动化构建，从而专注于更重要的创新工作。对于希望提升工作效率的前端开发者来说，掌握Gulp是不可或缺的技能之一。
gulp常用插件-gulp-autoprefixer
吴小粥的博客
10-19 1461
使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用它我们可以不必考虑各浏览器兼容前缀，在写完后再自动处理。
gulp插件autoprefixer
weixin_30682127的博客
08-30 85
　gulp的autoprefixer插件可以根据我们的设置帮助我们自动补全浏览器的前缀(如：-moz、-ms、-webkit、-o) 　　1）首先安装gulp，不知道怎么安装请看这里 　　2）安装autoprefixer插件 　　3）主要要在gulpfile.js文件引入autoprefixer，然后在添加autopre任务。完整代码如下 1 // 载入外挂 2 var gulp...
gulp教程之gulp-autoprefixer<转>
aawu4802的博客
08-24 174
简介： 使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】 1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1、gulp基本使用还未掌握？请...
探索 `gulp-autoprefixer`: 简化 CSS 前缀处理的利器
gitblog_00097的博客
04-13 465
探索 gulp-autoprefixer: 简化 CSS 前缀处理的利器 gulp-autoprefixerPrefix CSS项目地址:https://gitcode.com/gh_mirrors/gu/gulp-autoprefixer 在前端开发中，CSS 的兼容性问题常常让人头痛。为了支持不同的浏览器，我们需要为 CSS 规则添加各种前缀。不过，有了 ，你可以让自动化工具为你解决这个问题...
gulp构建项目（八）：gulp-autoprefixer、gulp-less、gulp-csso处理css
猿始森林
12-01 1577
需求分析：打包时自动添加css前缀；编译css预处理；压缩css 一、gulp-autoprefixer等模块安装 npm i -D gulp-less gulp-autoprefixer gulp-csso 二、gulp-autoprefixer等参数说明 /** * @param option {Object} * @param option.browsers 浏览器类型 * @p...
记一个 Gulp 中 postcss autoprefixer 无效的问题
金海博客
05-09 528
在使用Gulp构建项目的时候，用到了postcss、autoprefixer插件，但是配置了却无效果，代码是这样的 .pipe(gulpPostcss([require('cssnext'), require('precss'), autoprefixer()])) 后来查阅资料，说是需要在 package.json 文件里添加些内容，如下： "browserslist": [ "last 3 versions" ] 重新构建后，发现css中已经是自己想要的结果了。不过 css
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值