【无标题】

最新推荐文章于 2024-08-15 08:55:57 发布

无无烨

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量58

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/hcp3032475916/article/details/129730919

版权

1.gulp的简介

使用Gulp进行任务自动化可以让前端开发人员更加高效地构建和管理自己的项目，并可以大大减少重复的手动操作。下面是关于如何使用Gulp的简要步骤：

2.gulp的安装

1.安装gulp

在开始之前，需要确保您已经安装了 Node.js和npm。在命令行中使用如下命令来安装Gulp：

npm install -g gulp-cli

这会将Gulp命令行工具安装在全局环境下。

2.创建工程

创建一个空白的项目，并在项目的根目录下用如下命令生成一个名为package.json的文件。在package.json文件中添加必要的依赖，以及“gulp”作为开发依赖。

npm init
npm install gulp --save-dev

3.引入gulp

在项目内创建Gulp文件(gulfile.js)，并在其中引入 gulp依赖。如下所示：

const gulp = require('gulp');

3.gulp的基本使用

1.创建gulp任务

const gulp = require("gulp")
 
gulp.task("greet",function () {
    console.log('hello world');
});

2.运行gulp任务

1.通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的，不能引用全局下的。require语法是node.js独有的，只能在node.js环境下使用。

2.gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字，第二个参数是一个函数，就是执行这个命令的时候会做什么事情，都是写在这个里面的。

3.写完以上代码后，以后如果想要执行greet命令，那么只需要进入到项目所在的路径，然后终端使用gulp greet即可执行。

gulp greet

4.gulp的插件使用

1.创建处理html文件的任务

处理html文件，我们需要使用到ggulp-htmlmin插件。安装命令如下：

npm install gulp-htmlmin -D

然后在gulpfile.js中写入以下代码：

const gulp = require("gulp")
const htmlmin = require('gulp-html')
 
gulp.task("html",function () {
    gulp.src('./src/pages/*.html')
    .pipe(htmlmin({ // 通过配置的参数进行压缩
      collapseWhitespace:true, //移出空格
      removeEmptyAttributes:true, //表示移出空的属性（仅限于原生属性）
      collapseBooleanAttributes:true, // 移出布尔值属性
      removeAttributeQuotes:true, // 移出属性上的双引号
      minifyCSS:true, //压缩内嵌式css代码（只能基本压缩，不能添加前缀）
      minifyJS:true, // 压缩内嵌式js代码（只能基本压缩，不能进行转码）
      removeStyleLinkTypeAttributes:true,//移出style和link标签上的type属性
      removeScriptTypeAttributes:true, // 移出script标签上默认的type属性
    }))
    .pipe(gulp.dest('./dist/pages/'))
});

2.创建处理css文件的任务

如果我们想要实现一些更加复杂的功能，比如css压缩，那么我们还需要安装一下gulp-cssnano插件

npm install gulp-cssnano --save-dev

然后在gulpfile.js中写入以下代码：

const gulp = require("gulp")
const cssnano = require("gulp-cssnano")
 
// 定义一个处理css文件改动的任务
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./dist/css/"))
});

以上对代码进行详细解释：

        1.gulp.task：创建一个css处理的任务。
        2.gulp.src：找到当前css目录下所有以.css结尾的css文件。
        3.pipe：管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano。
        4.gulp.dest：将处理完后的文件，放到指定的目录下。不要放在和原文件相同的目录，以免产生冲突，也不方便管理。

3.创建处理js文件的任务

处理js文件，我们需要使用到gulp-uglify插件。安装命令如下：

npm install gulp-uglify --save-dev

安装完后，我们就可以对js文件进行处理了。示例代码如下：

const gulp = require("gulp")
const uglify = require('gulp-uglify');
 
gulp.task('script',function(){
    gulp.src(path.js + '*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'));
});