# gulp

  • 使用 npm install gulp 安装 gulp
  • 在项目根目录下建立 gulpfile.js 文件
  • 重构项目的文件夹结构 src 目录放置源代码文件 dist 目录放置构建后文件
  • 在 gulpfile.js 文件中编写任务.
  • 在命令行工具中执行 gulp 任务

# Gulp 安装


npm install gulp #安装 gulp
npm install gulp-cli -g  #全局安装g ulp命令行工具

# Gulp 使用

  • gulp.src():获取任务要处理的文件
  • gulp.dest():输出文件
  • gulp.task():建立 gulp 任务
  • gulp.watch():监控文件的变化
  • 用这些方法创建你得第一个 Gulp 任务

//引入gulp模块
const gulp = require("gulp");
// 使用gulp.task()方法建立任务
gulp.task("first", async () => {
  // 获取要处理的文件
  gulp
    .src("./src/css/base.css")
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest("./dist/css"));
});

# Gulp 插件

  • gulp-file-include: 公共文件抽取
  • gulp-htmlmin :html 压缩
  • gulp-babel '@babel/core' :JavaScript 语法转化
  • gulp-uglify :JavaScript 压缩混淆
  • gulp-less: less 语法转化
  • gulp-csso : css 压缩

# 安装到全局环境-g 安装到开发依赖--save--dev 默认则安装到项目依赖
npm install gulp-file-include gulp-htmlmin  gulp-babel @babel/core  gulp-uglify -D
npm install gulp-csso gulp-less  -D

# Gulp 脚本

 const gulp = require('gulp');
 // 引入gulp-插件
 const htmlmin = require("gulp-htmlmin");
 const fileinclude = require("gulp-file-include");
 const less = require("gulp-less");
 const csso = require("gulp-csso");
 const babel = require("gulp-babel");
 const uglify = require("gulp-uglify");

 // html任务
 // 1.抽取html中的公共代码 fileinclude()
 // 2.压缩html  htmlmin({ collapseWhitespace: true })
 gulp.task("htmlmin", async () => {
     gulp
         .src("./src/*.html")
         .pipe(fileinclude())
         .pipe(htmlmin({
             collapseWhitespace: true
         }))
         .pipe(gulp.dest("./dist"));
 });
 // css任务
 // 1.less语法转换
 // 2.css代码压缩
 gulp.task("cssmin", async () => {
     gulp
         .src(["./src/css/*.less", "./src/css/*.css"]) //可以接收一个数组作为参数,获取多种类型的文件
         .pipe(less()) //转换
         .pipe(csso()) //压缩
         .pipe(gulp.dest("./dist/css")); //输出
 });
 // js任务
 // 1.es6语法转换
 // 2.js代码压缩
 gulp.task("jsmin", async () => {
     gulp
         .src("./src/js/*.js")
         .pipe(
             babel({
                 // 判断当前代码环境,并对代码进行转换
                 presets: ["@babel/env"],
             })
         )
         .pipe(uglify())
         .pipe(gulp.dest("./dist/js"));
 });
 // 拷贝任务
 // 复制文件夹
 gulp.task("copy", async () => {
     gulp.src("./src/images/*").pipe(gulp.dest("./dist/images"));
     gulp.src("./src/lib/*").pipe(gulp.dest("./dist/lib"));
 });
 // 构建任务 调用其他定义好的任务
 gulp.task("default", gulp.series("htmlmin", "cssmin", "jsmin", "copy"));

执行

//command
gulp;