中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › 前端必会的轻量打包工具gulp使用详解

[前端] 前端必会的轻量打包工具gulp使用详解

2066 0
王子 2022-11-8 08:03:47 | 显示全部楼层 |阅读模式
目录

    一. 安装Node和gulp二.使用gulp压缩Js
      2.1 方法2.2 步骤
    三. 压缩CSS文件
      3.1 步骤
    四. 压缩图片五. 编译Less文件六. 编译Sass文件


一. 安装Node和gulp

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。
在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
安装node： 由于gulp是基于node实现的，所以要先安装node
node安装
安装gulp
  1. npm install -g gulp
复制代码
安装
  1. gulp -v
复制代码
查看版本

二.使用gulp压缩Js

压缩js文件可以降低js文件的大小，提高页面打开速度。

2.1 方法

    找到要压缩的所有的js文件，压缩它们，将压缩后的文件放在 dist/js/目录下

2.2 步骤

1. 创建gulp-demo文件夹，使用npm初始化项目
  1. npm init
复制代码
2. 在项目根目录新建一个gulpfile.js文件
    gulp所有的配置都在这个文件里面


3. 在gulpfile文件中书写压缩js文件的代码，安装gulp 和 gulp-uglify压缩模块
  1. //获取gulp对象
  2. const gulp = require("gulp")
  3. // 压缩js文件的对象，使用之前需要安装
  4. // 安装方法：npm i gulp-uglify -D
  5. const uglify = require("gulp-uglify")
  6. // 定义压缩文件的处理方法
  7. function script(){
  8.      //1. 匹配要所有压缩的js文件
  9.      gulp.src('js/*.js')
  10.      //2. 压缩文件
  11.     .pipe(uglify())
  12.      //3. 将压缩后的文件写入指定目录
  13.     .pipe(gulp.dest('dist/js'))
  14. }
  15. //将定义好的压缩方法暴露给外界
  16. exports.script = gulp.series(script);
复制代码
  1. npm i gulp gulp-uglify -D
复制代码
4. 在项目根目录创建js文件夹并且创建需要测试的js文件


5. 在命令行输入如下命令运行
    由于我们导入的为 script，所以这里输入gulp script命令即可
  1. gulp script
复制代码
    压缩后的目录如下所示


6. 升级压缩功能，每次文件修改之后，自动压缩打包
  1. //获取gulp对象
  2. const gulp = require("gulp")
  3. // 压缩js文件的对象，使用之前需要安装
  4. // 安装方法：npm i gulp-uglify -D
  5. const uglify = require("gulp-uglify")
  6. // 定义压缩文件的处理方法
  7. function script(){
  8.      //1. 匹配要所有压缩的js文件
  9.      gulp.src('js/*.js')
  10.      //2. 压缩文件
  11.     .pipe(uglify())
  12.      //3. 将压缩后的文件写入指定目录
  13.     .pipe(gulp.dest('dist/js'))
  14. }
  15. //创建监听js文件的方法
  16. function autoScript(){
  17.      // 创建监听对象
  18.      var watcher = gulp.watch("js/*.js");
  19.      //分别监听 change,add,unlink事件
  20.      watcher.on("change",function(path,stats){
  21.          console.log(`${path} has been changed!`);
  22.     });
  23.      watcher.on("add",function(path,stats){
  24.          console.log(`${path} has been add!`);
  25.     });
  26.      watcher.on("unlink",function(path,stats){
  27.          console.log(`${path} has been unlink!`);
  28.     })
  29. }
  30. //将定义好的压缩方法暴露给外界，并作为gulp的默认值
  31. // exports.script = gulp.series(script,autoScript);
  32. exports.autoScript = gulp.parallel(script,autoScript);
复制代码
    运行
  1. gulp autoScript
复制代码
7. 使用 exports.default 定义默认任务
  1. //如上所示，我们使用 export script 和 export autoScript命令执行任务
  2. //可以通过 exports.default 关键字指定默认任务
  3. exports.default = gulp.parallel(script,autoScript);
复制代码
    设置完成之后，在命令行输入 gulp即可启动任务
  1. gulp
复制代码
    完整项目目录：gulp-demo(压缩js)注意：所有的项目，下载之后先在项目根目录要运行 npm i命令安装模块

三. 压缩CSS文件

CSS文件压缩过程类似于Js文件，这里做简单介绍

3.1 步骤

1.创建gulpfile.js文件
2. 安装压缩CSS文件需要用到的模块
  1. npm i gulp gulp-minify-css -D
复制代码
3. 在项目根目录创建CSS文件夹，在CSS文件夹下面创建要测试的CSS文件
4. 编写压缩代码，到处任务调用
  1. //获取gulp对象
  2. const gulp = require("gulp")
  3. //获取压缩 css文件的方法
  4. const minifyCss = require("gulp-minify-css")
  5. // 定义压缩文件的处理方法
  6. function css(){
  7.     //1. 匹配要所有压缩的css文件
  8.     gulp.src('css/*.css')
  9.     //2. 压缩文件
  10.     .pipe(minifyCss())
  11.     //3. 将压缩后的文件写入指定目录
  12.     .pipe(gulp.dest('dist/css'))
  13. }
  14. //升级：自动监听文件的改变，
  15. //创建监听js文件的方法
  16. function autoCss(){
  17.     // 创建监听对象
  18.     var watcher = gulp.watch("css/*.css");
  19.     //分别监听 change,add,unlink事件
  20.     watcher.on("change",function(path,stats){
  21.         console.log(`${path} has been changed!`);
  22.     });
  23.     watcher.on("add",function(path,stats){
  24.         console.log(`${path} has been add!`);
  25.     });
  26.     watcher.on("unlink",function(path,stats){
  27.         console.log(`${path} has been unlink!`);
  28.     })
  29. }
  30. //将定义好的压缩方法暴露给外界，并作为gulp的默认值
  31. // exports.default = gulp.series(css,autoCss);
  32. exports.autoCss = gulp.parallel(css,autoCss);
复制代码
5. 运行文件
  1. gulp autoCss
复制代码
    完整项目目录：gulp-demo(压缩CSS)注意：所有的项目，下载之后先在项目根目录要运行 npm i命令安装模块

四. 压缩图片

方法同上压缩js 和CSS文件，以下给出压缩图片的依赖模块，以及示例代码
依赖模块： gulp ，gulp-imagemin
代码示例：
  1. //获取gulp对象
  2. const gulp = require("gulp")
  3. //获取压缩 图片文件的对象
  4. const imagemin = require("gulp-imagemin")
  5. // 定义压缩文件的处理方法
  6. function images(){
  7.      //1. 匹配要所有压缩的图片文件
  8.      gulp.src('imgs/*.*')
  9.      //2. 压缩文件
  10.     .pipe(imagemin({
  11.          progressive: true
  12.     }))
  13.      //3. 将压缩后的文件写入指定目录
  14.     .pipe(gulp.dest('dist/imgs'))
  15. }
  16. //升级：自动监听文件的改变，
  17. //创建监听图片文件的方法
  18. function autoImages(){
  19.      // 创建监听对象
  20.      var watcher = gulp.watch("imgs/*.*");
  21.      //分别监听 change,add,unlink事件
  22.      watcher.on("change",function(path,stats){
  23.          console.log(`${path} has been changed!`);
  24.     });
  25.      watcher.on("add",function(path,stats){
  26.          console.log(`${path} has been add!`);
  27.     });
  28.      watcher.on("unlink",function(path,stats){
  29.          console.log(`${path} has been unlink!`);
  30.     })
  31. }
  32. //将定义好的压缩方法暴露给外界，并作为gulp的默认值
  33. // exports.images = gulp.series(images,autoImages);
  34. exports.autoImages = gulp.parallel(images,autoImages);
复制代码
    完整项目目录：gulp-demo(压缩图片)注意：所有的项目，下载之后先在项目根目录要运行 npm i命令安装模块

五. 编译Less文件

模块： gulp，gulp-less
示例：
  1. //获取gulp对象
  2. const gulp = require("gulp")
  3. //获取压缩 less文件的对象
  4. const gulpLess = require("gulp-less")
  5. // 定义压缩文件的处理方法
  6. function less(){
  7.      //1. 匹配要所有压缩的less文件
  8.      gulp.src('less/*.less')
  9.      //2. 压缩文件
  10.     .pipe(gulpLess())
  11.      //3. 将压缩后的文件写入指定目录
  12.     .pipe(gulp.dest('dist/less'))
  13. }
  14. //升级：自动监听文件的改变，
  15. //创建监听less文件的方法
  16. function autoLess(){
  17.      // 创建监听对象
  18.      var watcher = gulp.watch("less/*.less");
  19.      //分别监听 change,add,unlink事件
  20.      watcher.on("change",function(path,stats){
  21.          console.log(`${path} has been changed!`);
  22.     });
  23.      watcher.on("add",function(path,stats){
  24.          console.log(`${path} has been add!`);
  25.     });
  26.      watcher.on("unlink",function(path,stats){
  27.          console.log(`${path} has been unlink!`);
  28.     })
  29. }
  30. //将定义好的压缩方法暴露给外界，并作为gulp的默认值
  31. // exports.images = gulp.series(less,autoLess);
  32. exports.autoLess = gulp.parallel(less,autoLess);
复制代码
    完整项目目录：gulp-demo(编译less)注意：所有的项目，下载之后先在项目根目录要运行 npm i命令安装模块

六. 编译Sass文件

模块： gulp，gulp-sass
示例：
  1. //获取gulp对象
  2. const gulp = require("gulp")
  3. //获取压缩 sass文件的对象
  4. const gulpSass = require("gulp-sass")
  5. // 定义压缩文件的处理方法
  6. function sass(){
  7.      //1. 匹配要所有压缩的sass文件
  8.      gulp.src('sass/*.scss')
  9.      //2. 压缩文件
  10.     .pipe(gulpSass())
  11.      //3. 将压缩后的文件写入指定目录
  12.     .pipe(gulp.dest('dist/sass'))
  13. }
  14. //升级：自动监听文件的改变，
  15. //创建监听sass文件的方法
  16. function autoSass(){
  17.      // 创建监听对象
  18.      var watcher = gulp.watch("sass/*.scss");
  19.      //分别监听 change,add,unlink事件
  20.      watcher.on("change",function(path,stats){
  21.          console.log(`${path} has been changed!`);
  22.     });
  23.      watcher.on("add",function(path,stats){
  24.          console.log(`${path} has been add!`);
  25.     });
  26.      watcher.on("unlink",function(path,stats){
  27.          console.log(`${path} has been unlink!`);
  28.     });
  29.      watcher.on("error",function(error){
  30.          console.log(error);
  31.     })
  32. }
  33. //将定义好的压缩方法暴露给外界，并作为gulp的默认值
  34. // exports.images = gulp.series(images,autoImages);
  35. exports.autoSass = gulp.parallel(sass,autoSass);
复制代码
完整项目目录：gulp-demo(编译sass)
注意：所有的项目，下载之后先在项目根目录要运行 npm i命令安装模块
以上就是前端必会的轻量打包工具gulp使用详解的详细内容，更多关于前端轻量打包工具gulp的资料请关注中国红客联盟其它相关文章！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

王子

创始人

关注
  • 1101
    主题
  • 105
    粉丝
  • 59
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天