关于gulp的简单用法

Posted 2020-08-23

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 同步文本框内容