guld方法

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/”))
});

gulp.task：创建一个css处理的任务。
gulp.src：找到当前css目录下所有以.css结尾的css文件。
pipe：管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano。
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/'));
});

这里就是增加了一个 .pipe(uglify())的处理，对 js文件进行压缩和丑化（修改变量名）等处理。