Gulp基础

2023-10-05 23:48:34

一、简介

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(['文件目录/文件名', '文件目录/文件名'])

注意：' * ' ，通配符，比如：'css/*.css' 表示css目录下的所有css文件

gulp.dest()

作用：输出文件

gulp.dest('目标文件目录');

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的基本使用步骤

四、Gulp中提供的方法

gulp.src()

gulp.dest()

gulp.task()

gulp.watch()

五、Gulp插件介绍

六、简单案例

复制文件

复制文件夹

压缩html文件

css文件语法转换与压缩

js文件语法版本转换与压缩

相关文章