gulp项目配置,压缩css,压缩js,进行监听文件改动

1,创建项目

javascript 复制代码
npm install -g gulp

这个应该很熟悉,就是全局安装gulp

2,创建一个工程,使用node创建,统一命令

javascript 复制代码
npm init -y

3,创建后,目录出现一个package.json文件,没错,就是我们用vue-cli创建工程的时候,依赖配置文件,使用下面命令,往项目中添加gulp,目录如下图

javascript 复制代码
npm install gulp

4, 添加一个专属配置文件,gulpfile.js

5,这里我安装的gulp版本是5.0版本

6,安装压缩js和css的模块,这里项目目录如下图

javascript 复制代码
npm i gulp-ugify gulp-clean-css

7,安装好后,以下就是配置文件

javascript 复制代码
var gulp = require("gulp");
// 获取 uglify 模块(用于压缩 JS)
var uglify = require("gulp-uglify");
// 获取 cleancss 模块(用于压缩 CSS)
var cleanCSS = require("gulp-clean-css");
// 获取conect模块(用于启动服务)
var connect = require('gulp-connect')
var fileinclude = require("gulp-file-include");

gulp.task("app", (cb) => {
  // 获取html,并打包
  gulp
    .src(["src/app/**/*.html"])
    .pipe(
      fileinclude({
        prefix: "@@",
        basepath: "@file",
      })
    )
    .pipe(gulp.dest("dist/app"));
  cb();
});


// 压缩 js 文件
gulp.task("js", function () {
  // 1. 找到文件
  return (
    gulp
      .src("src/js/*.js")
      // 2. 压缩文件
      .pipe(uglify())
      // 3. 另存压缩后的文件
      .pipe(gulp.dest("dist/js"))
  );
});

// 压缩css
gulp.task("css", function () {
  // 1. 找到文件
  return (
    gulp
      .src("src/css/*.css")
      // 2. 压缩文件
      .pipe(cleanCSS())
      // 3. 另存压缩后的文件
      .pipe(gulp.dest("dist/css"))
  );
});

gulp.task('watch',function(){
  gulp.watch('src/js/*.js',gulp.series('js'));
  gulp.watch('src/css/*.css',gulp.series('css'));
  gulp.watch("src/app/**/*.html",gulp.series('app'));
});	
 
// 开启本地服务器
gulp.task('server',function(){
  connect.server({
    port:8090,
    // 启动实时刷新
    livereload:true
  })
});

gulp.task("default", gulp.parallel( 'server', 'watch'));

8,这里的配置路径**表示任何下级子文件都匹配,*匹配任意名称

相关推荐
天天扭码23 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
北上ing1 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
纪元A梦2 小时前
华为OD机试真题——推荐多样性(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
小墨宝2 小时前
js 生成pdf 并上传文件
前端·javascript·pdf
www_pp_3 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue3 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码4 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛4 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜4 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js