首页 > 代码库 > 关于gulp的简单用法

关于gulp的简单用法

2024-08-27 09:20:13   221人阅读

1.1. npm -Node的包管理工具

  • node package manager
  • npm官网
  • 淘宝镜像
  • cnpm

1.2. 安装 node

  • 下载node的安装包，直接安装

1.2.1. 验证是否安装成功

  • 1 使用win + r键，打开运行窗口
  • 2 输入cmd，敲回车，进入到命令行工具
  • 3 输入node -v，检测node是否安装成功
  • 4 输入npm -v，检测 npm

1.2.2. 使用淘宝镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

1.3. 使用npm

  • 初始化npm配置文件：npm init
  • 会生成一个名为：package.json 的文件

1.3.1. 使用npm下载包

  • 命令：npm install [名称] --save
  • 参数--save 会修改 package.json，添加"dependencies"依赖项
  • 注意：会在当前目录中添加一个名为node_modules的文件夹
    • 文件夹中存放了，所有下载的包文件
  • 下载指定版本号的包：npm install [名称]@版本号 --save

1.3.2. package.json

  • 作用：npm可以根据该文件，配合npm install --production命令，下载配置中的依赖项
  • 优势：不用每次都拷贝依赖项，只需要使用package.json即可

1.3.3. 移除包

  • 命令：npm remove [名称] --save
  • 作用：删除包文件，并修改package.json

1.4. Gulp 前端自动化构建工具

  • 官网
  • 中文网
  • 在线压缩

1.4.1. 概述

Gulp：用自动化构建工具增强你的工作流程！

  • 1 易于使用
  • 2 高效，利用node.js强大的流（文件流），快速完成构建
  • 3 构建工作就像一系列 流管道（水流经过管道）

1.4.2. 应用场景

  • 项目发布上线之前对项目进行构建
  • 自动完成一系列重复的操作
js、css、html文件的压缩、混淆、合并、监视文件变化、同步刷新浏览器 等等
Less ==> CSS 或者 Sass ==> CSS

1.4.3. 安装Gulp命令行

  • 1 全局安装 gulp
    • npm install --global gulp
  • 2 作为项目的开发依赖（devDependencies）安装：
    • npm install --save-dev gulp

1.4.4. 其他构建工具

  • Grunt 、webpack

1.4.5. 核心方法

  • task() ：gulp中是以任务为单位来实现功能
  • src() ：传入路径参数，获取到要处理的指定文件
  • dest() ：指定处理后的文件输出路径
  • watch()：监视文件的变化，做出相应的处理

1.4.6. 写任务的步骤

  • 注意：任务写在 gulpfile.js 文件中，这个文件需要我们自己创建
// 1 得到 gulp 模块
var gulp = require("gulp");

// 2 新建任务
gulp.task("js", function() {
    // 使用 src 方法，根据路径 "./app.js" 找到app.js文件
    gulp.src("./app.js")
        // 使用 dest 方法，执行输出路径
        .pipe(gulp.dest("./dist"));
});

// 3 执行： `gulp js` 命令

1.4.7. 使用gulp的插件

  • gulp-less：将less转化为css
  • gulp-uglify：压缩和混淆js代码
  • gulp-concat：合并js/css文件
  • gulp-cssnano：压缩css代码
  • gulp-htmlmin：压缩html代码
    • htmlmin文档

  • browser-sync：同步刷新浏览器

  • 以上插件都使用：npm install gulp-[名称] --save-dev 安装

npm install --save-dev gulp gulp-uglify gulp-concat gulp-cssnano gulp-htmlmin gulp-less
npm install --save-dev browser-sync

1.5. 参考文章

  • Gulp中文网 -文档
  • Gulp 入门
  • Gulp+BrowserSync

1.6. 单独使用 browser-sync

  • 作用：更改代码之后自动刷新浏览器

1.6.1. 安装

  • 命令：npm install browser-sync -g 全局安装

1.6.2. 监视

  • 命令：browser-sync start --server --files "index.html"
  • 监视单个文件：-- files "index.html"
  • 监视多个文件：-- files "index.html, test.css"
  • 监视目录文件：-- files "./css/*.css"
  • 监视所有文件：-- files "*.*"

1.6.3. 优势

  • 动态重新加载样式文件，而不是刷新页面，避免繁琐的操作
  • 前提：样式放到一个单独的css文件中

1.6.4. 其他应用

  • 管理地址：UI: http://localhost:3001
  • 多浏览器同步测试
1 同步事件触发
2 同步浏览器滚动
3 同步文本框内容

关于gulp的简单用法


联系
我们