gulp安装及使用

最新推荐文章于 2023-03-22 21:36:16 发布

不想写作业。

最新推荐文章于 2023-03-22 21:36:16 发布

阅读量743

点赞数 2

文章标签： gulp javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_61519853/article/details/129686477

版权

gulp工具

全局安装gulp-cli

通过npm工具全局安装gulp-cli

打开命令行运行 gulp -v查看是否安装成功

在项目中安装gulp

在demo目录下打开cmd命令行工具

（1）使用npm 初始化项目

默认enter 该命令会创建一个package.json文件

（2）局部安装gulp

执行命令后会在项目根目录中生成一个node_modules目录和package-lock.json文件

（3）检查是否完全安装好

gulp -v

在项目中使用gulp

gulp中的常用插件

插件	说明
gulp-htmlmin	压缩HTML文件
gulp-csso	压缩优化CSS
gulp-babel	JavaScript语法转化
gulp-less	Less语法转换
gulp-sass	Sass语法转换
gulp-uglify	压缩混淆JavaScript文件
gulp-file-include	公共文件包含
browsersync	浏览器时间实时同步

2.压缩并抽取HTML中的公共代码

（1）下载安装gulp-htmlmin插件

在项目下，通过npm工具下载安装gulp-htmlmin

安装成功的命令行输出结果

（2）在gulpfile.js文件中引用gulp-htmlmin插件

在gulpfile.js中引用gulp-htmlmin插件

（3）在gulpfile.js文件中调用gulp-htmlmin插件

在gulpfile.js中调用gulp-htmlmin插件，实现对HTML文件中代码的压缩

gulp.task('htmlmin',(callback) => {
gulp.src('./src/*.html')
    //压缩HTML文件中的代码
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest('dist'));
callback();
});

（4）运行命令gulp-htmlmin

切换到目录下，运行命令gulp-htmlmin

命令执行成功后，打开项目下的dist目录，可以看到压缩后的article.html文件和default.html文件

（5）下载安装gulp-file-include插件

在目录下，通过npm工具下载安装gulp-file-include插件,

gulp-file-include插件安装成功的命令行输出结果

（6）在gulpfile.js文件中引用gulp-file-include插件

（7）在gulpfile.js文件中调用gulp-file-include插件

gulp.task ( 'htmlmin'， (callback) => {
    gulp.src( './src/*.html ')
//抽取HTML文件中的公共代码
    .pipe (fileinclude ( ))
//压缩HTML文件中的代码
.pipe (htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest ( 'dist'));
callback();
});

调用fileinclude()方法，完成对HTML文件公共代码的抽取

（8）创建HTML文件

在demo07\src目录下新建common目录，然后在common目录下创建header.html文件,并把头部的公共代码粘贴到 header.html 文件中

（9）修改代码

把demo07\src目录下的default.html文件和 article.html 文件的头部代码删除掉，修改为

（10）运行gulp htmlmin

打开命令行工具，切换到demo07目录，再次运行命令“gulp htmImin”。gulp任务执行成功后，打开dist目录下的default.html文件和 article.html文件，查看代码会发现这两个文件中都包含有header部分代码。

3.压缩并转换Less语法

（1）下载安装gulp-less插件

在项目下，通过npm工具下载安装gulp-less插件

gulp-less插件安装成功的命令行输出结果

（2）在gulpfile.js 文件中引用gulp-less插件。

（3）在 gulpfile.js文件中调用gulp-less插件

实现将Less语法转换为CSS语法

gulp.task('cssmin',(callback) => {
//选择css目录下的所有.less文件
    gulp.src('./src/css/*.less')
//将Less语法转换为cSS 语法.pi
    .pipe(less())
//将处理的结果输出
    .pipe(gulp.dest('dist/css'))
callback();
} );

通过gulp.task()创建一个cssmin任务,然后在回调函数中使用gulp.src()方法获取src 中css目录下的所有.less文件。然后调用less()方法完成对.less文件的转换。最后使用gulp.dest()方法将文件保存到dist下的css目录中。

(4）在demo07\src\lcss目录下，新建需要编译的 a.less文件

.headers {
width: 100px;
.logo{
height: 200px;
background-color: red;
}

(5 )打开命令行工具，切换到demo07目录，运行命令“gulp cssmin”

gulp任务执行成功后,打开项目下的dist目录，然后打开css目录就可以看到css目录下新建了一个同名的a.css文件。a.css文件代码如下。

.headers {
width: 100px;
 }
.headers .logo {
height: 200px;
background-color: red;
 }

css目录结构如下

同时获取.less和.css两种类型的文件并对其进行压缩可以将gulp.src('路径')中的字符串改成数组的形式

（6）在demo07目录下，通过npm工具下载安装gulp-csso插件，对CSS代码进行压缩

gulp-csso插件安装成功的命令行输出结果

( 7）在 gulpfile.js文件中引用gulp-csso插件

(8）在 gulpfile.js文件中调用gulp-csso插件，对CSS代码进行压缩

gulp.task( 'cssmin', (callback) =>
{
//选择css目录下的所有.less 文件以及.css文件
gulp.src(['./src/css/* .less', './src/ css/* .css ' ])
//将Less 语法转换为cSS语法
.pipe (less () )
//将cSS代码进行压缩
.pipe (csso ())
//将处理的结果输出
.pipe (gulp.dest ('dist/css ') )
callback();
 });

(9)打开命令行工具，切换到demo07目录，运行命令“gulp cssmin”

gulp任务执行成功后，打开项目下的dist目录,然后打开css目录就可以看到当前css目录结构

此时，打开css目录下的 a.css文件，会发现代码已经被压缩了

.headers{width: 100px }.headers .logo {height:200px; background-color:red}

4.压缩并转换ES6语法

(1)在C:\code\chapter02\demo07目录下，通过npm工具下载安装gulp-babel插件及它的依赖模块，实现ES6语法的转换

gulp-babel插件安装成功的命令行输出结果

(2）在gulpfile.js文件中引用gulp-babel插件

(3）在 gulpfile.js文件中调用gulp-babel插件，实现ES6语法的转换

gulp.task ( 'jsmin', (callback) =>{
//选择js目录下的所有JavaScript 文件
gulp.src( './src/js/* .js ')
.pipe (babel({
//判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
presets: [ '@babel/env ']
}))
.pipe (gulp.dest ('dist/js ') );
callback();
 });

通过gulp.task()创建一个jsmin任务，然后调用babel()方法完成对ES6语法的转换。最后使用gulp.dest()方法将文件保存到dist目录下的js目录中。

(4)在demo07'srcljs目录下，新建需要编译的JavaScript文件(如 base.js文件)

const x =100;
 let y = 200;
const fn = ()=>{
console.log (1234);
};

(5）打开命令行工具，切换到demo07目录，运行命令“gulp jsmin”

gulp任务执行成功后,打开项目下的dist目录,然后打开js目录就可以看到js目录下新建了一个同名的base.js文件。base.js

"use strict" ;
var x= 100;
var y = 200;
var fn = function fn({
console.log (1234);
};

从base.css文件的代码可以看出，gulp-babel插件已经成功将ES6语法转换成了ES5语法。

下一步将要完成对JavaScript文件中的代码的压缩操作。

( 6）在demo07目录下，通过npm工具下载安装gulp-uglify插件

gulp-uglify插件安装成功的命令行输出结果

(7）在gulpfile.,js文件中引用gulp-uglify 插件

(8)在gulpfile.js文件中调用gulp-uglify插件，对JavaScript 代码进行压缩

1gulp.task( 'jsmin',(callback)=>{
//选择js目录下的所有JavaScript 文件
gulp.src('./src/js/* .js ')
.pipe (babel({
//判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
presets: [ '@babel/env ' ]
}) )
.pipe (uglify())
.pipe(gulp.dest ( 'dist/js' ));
callback();
 });

(9)打开命令行工具，切换到demo07目录，运行命令“gulp jsmin”

gulp任务执行成功后，打开项目下的dist目录,然后打开js目录就可以看到当前js目录下的 base.,js文件被压缩了

5.复制目录

下面要把src目录下的images目录和 lib目录复制到dist目录下

(1)在gulpfile.js文件中创建copy任务，进行目录复制操作

 gulp.task ( ' copy', (callback) =>{
gulp.src('./src/images/* ')
.pipe (gulp.dest ('dist/images ' ) );
gulp.src( './src/lib/* ')
.pipe(gulp.dest ( 'dist/lib') );
callback();
});

通过gulp.task()创建一个copy任务，分别使用gulp.src(获取src目录下的images目录和 lib目录,并使用gulp.dest()方法将images文件和lib文件保存到dist目录中。