Gulp基础
2022/1/30 6:06:04
本文主要是介绍Gulp基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
@
目录- 一、简介
- 二、功能
- 三、Gulp的基本使用步骤
- 四、Gulp中提供的方法
- gulp.src()
- gulp.dest()
- gulp.task()
- gulp.watch()
- 五、Gulp插件介绍
- 六、简单案例
- 复制文件
- 复制文件夹
- 压缩html文件
- css文件语法转换与压缩
- js文件语法版本转换与压缩
gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网 (gulpjs.com.cn)
gulp 入门指南_w3cschool
一、简介
Gulp为第三方模块, 是个基于node平台开发的前端构建工具,将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了用机器代替手工,提高开发效率。
二、功能
- 项目上线,HTML、CSS、JS文件压缩合并
- 语法转换(es6、less ...)
- 公共文件抽离
- 修改文件浏览器自动刷新
三、Gulp的基本使用步骤
-
使用
npm install gulp
下载gulp库文件到项目根目录 -
在项目根目录下建立
gulpfile.js
文件 -
重构项目的文件夹结构
src
目录放置源代码文件dist
目录放置构建后文件 -
在
gulpfile.js
文件中编写任务 -
使用
npm install gulp-cli -g
下载gulp命令工具到全局安装目录下,在命令行窗口中使用gulp提供的命令去执行gulp任务
四、Gulp中提供的方法
gulp.src()
gulp.src()
作用:获取任务要处理的文件
//获取单个文件 gulp.src('文件目录/文件名'); //获取多个文件 gulp.src(['文件目录/文件名', '文件目录/文件名'])
注意:' * ' ,通配符,比如:
'css/*.css'
表示css目录下的所有css文件
gulp.dest()
gulp.dest()
作用:输出文件
gulp.dest('目标文件目录');
gulp.task()
gulp.task()
作用:建立gulp任务
gulp.task('任务名', callback); /* '任务名' :gulp可建立多个任务,通过任务名区分不同的任务 callback :当glup执行任务时,执行该回调函数 */
//构建任务:建立一个可以一次执行当前gulpfile.js下的多个任务的总任务 gulp.task('任务名',['任务名1','任务名2','任务名3','任务名4','任务名5' ...]); //当文件名为 'default' 时,在CLI执行任务时可省略任务名, 直接输入gulp 命令调用default方法
gulp.watch()
五、Gulp插件介绍
gulp plugins
- gulp-htmlmin :html文件压缩
- gulp-csso :压缩css
- gulp-babel :JavaScript语法转化
- gulp-less: less语法转化
- gulp-uglify :压缩混淆JavaScript
- gulp-file-include 公共文件包含
- browsersync 浏览器实时同步
六、简单案例
复制文件
在项目根目录下进入 CLI 下载模块包
npm install gulp
npm install gulp-cli -g
//gulpfile.js // 引用模块 const gulp = require('gulp'); // 使用gulp.task建立任务 // 1.任务的名称 // 2.任务的回调函数 gulp.task('copyFile', () => { // 1.使用gulp.src获取要处理的文件 gulp.src('./src/css/base.css') .pipe(gulp.dest('./dist/css'))//pipe: 转接流 console.log('文件复制完毕'); });
stream.pipe()
nodejs运行结果
D:\...\gulp_item\copyfile>gulp copyFile [17:13:28] Using gulpfile D:\...\gulp_item\copyfile\gulpfile.js [17:13:28] Starting 'copyFile'... 文件复制完毕 [17:13:28] The following tasks did not complete: copyFile [17:13:28] Did you forget to signal async completion?
复制文件夹
压缩html文件
在项目根目录下进入 CLI 下载模块包
npm i gulp
npm i gulp-cli -g
npm i gulp-htmlmin
npm i gulp-file-include
<!-- header.html 为 a.html 和 b.html 的公共部分,抽离出来放在一个单独目录 src/common 下--> <!-- 头部框架开始 --> <div class="header">...</div> <!-- 头部框架结束 -->
<!-- a.html --> @@include('./common/header.html') <!-- 文章框架开始 --> <div class="article">...</div> <!-- 文章框架结束 -->
<!-- b.html --> @@include('./common/header.html') <!-- 文章列表开始 --> <ul class="list w1100">...</ul> <!-- 文章列表结束 --> <!-- 分页开始 --> <div class="page w1100">...</div> <!-- 分页结束 -->
//gulpfile.js // 引用模块 const gulp = require('gulp'); const htmlmin = require('gulp-htmlmin'); const fileinclude = require('gulp-file-include'); // 使用gulp.task建立htmlmin任务 // 1.html文件中代码的压缩操作 // 2.抽取html文件中的公共代码 gulp.task('htmlmin', () => { // 使用gulp.src获取要处理的文件 gulp.src('./src/*.html') //引入文件共同代码 .pipe(fileinclude()) // 压缩html文件中的代码 //collapseWhitespace: 除去空格 .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('./dist')); console.log('html文件压缩完毕'); });
nodejs运行结果
D:\...\test\gulp_item\htmlMin>gulp htmlmin [17:58:54] Using gulpfile D:\...\test\gulp_item\htmlMin\gulpfile.js [17:58:54] Starting 'htmlmin'... html文件压缩完毕 [17:58:54] The following tasks did not complete: htmlmin [17:58:54] Did you forget to signal async completion?
css文件语法转换与压缩
在项目根目录下进入 CLI 下载模块包
npm i gulp
npm i gulp-cli -g
npm i gulp-csso
npm i gulp-less
//gulpfile.js // 引用模块 const gulp = require('gulp'); const less = require('gulp-less'); const csso = require('gulp-csso'); // 使用gulp.task建立cssmin任务 // 1.less语法转换 // 2.css代码压缩 gulp.task('cssmin', () => { // 使用gulp.src获取要处理的文件 gulp.src(['./src/css/*.css', './src/css/*.less']) // 将less语法转换为css语法 .pipe(less()) // 将css代码进行压缩 .pipe(csso()) // 将处理的结果进行输出 .pipe(gulp.dest('./dist/css')); console.log('css文件压缩完毕'); });
nodejs运行结果
D:\...\test\gulp_item\cssMin>gulp cssmin [18:12:27] Using gulpfile D:\...\test\gulp_item\cssMin\gulpfile.js [18:12:27] Starting 'cssmin'... css文件压缩完毕 [18:12:27] The following tasks did not complete: cssmin [18:12:27] Did you forget to signal async completion?
js文件语法版本转换与压缩
在项目根目录下进入 CLI 下载模块包
npm i gulp
npm i gulp-cli -g
npm install gulp-babel @babel/core @babel/preset-env
后面@...两项时 gulp-babel 的依赖
npm i gulp-uglify
//gulpfile.js // 引用模块 const gulp = require('gulp'); const babel = require('gulp-babel'); const uglify = require('gulp-uglify'); // 使用gulp.task建立jsmin任务 // 1.es6代码转换 // 2.代码压缩 gulp.task('jsmin', () => { gulp.src('./src/js/*.js') .pipe(babel({ // presets: 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码 presets: ['@babel/env'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js')); console.log('js文件压缩完毕'); });
nodejs运行结果
D:\...\test\gulp_item\jsMin>gulp jsmin [21:00:37] Using gulpfile D:\...\test\gulp_item\jsMin\gulpfile.js [21:00:37] Starting 'jsmin'... js文件压缩完毕 [21:00:37] The following tasks did not complete: jsmin [21:00:37] Did you forget to signal async completion?
这篇关于Gulp基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南
- 2024-09-30Dnd-Kit学习:新手快速入门指南