当前位置: 首页 > 知识库问答 >
问题:

gulp 压缩js 后 浏览器无法运行 require is not defined?

商兴朝
2023-07-14

Uncaught ReferenceError: require is not defined
gulp 压缩后希望可以在浏览器运行,这种要怎么修改呢?
gulpfile.js 配置

const gulp = require('gulp');//引入gulp  const htmlMin = require('gulp-htmlmin');//引入html压缩模块  const autoprefixer = require('gulp-autoprefixer');const cleanCss = require('gulp-clean-css') //引入css压缩模块const babel = require('gulp-babel'), //引入es6转es5模块    uglify = require('gulp-uglify') //引入js压缩模块const connect = require('gulp-connect');const webserver = require('gulp-webserver');const proxy = require('http-proxy-middleware');const sass = require('gulp-sass')(require('sass'));// 方便路径管理const path = {    html: {        src: 'src/**/*.html',        dest: 'dist'    },    css: {        src: 'src/**/*.css',        dest: 'dist'    },    js: {        src: 'src/**/*.js',        dest: 'dist'    },    scss: {        src: 'src/**/*.scss',        dest: 'dist'    }}/**  * 创建任务,并命名任务名 * 一个*表示所有文件,两个*表示所有目录 */const htmlCompress = () => {    return gulp.src(path.html.src)        .pipe(htmlMin({            removeComments: true,//清除HTML注释            collapseWhitespace: true,//压缩HTML            collapseBooleanAttributes: true,//压缩布尔属性的值            removeEmptyAttributes: true,//删除所有空格作属性值            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"              minifyJS: true,//压缩页面JS            minifyCSS: true //压缩页面css        })).pipe(gulp.dest(path.html.dest)) //指定压缩文件放置的目录 }const scssCompile = () => {    return gulp.src(path.scss.src)        .pipe(sass().on('error', sass.logError))        .pipe(gulp.dest(path.scss.dest));}const cssCompress = () => {    return gulp.src(path.css.src)        .pipe(autoprefixer({            cascade: false        }))        .pipe(cleanCss())        .pipe(gulp.dest(path.css.dest))}const jsCompress = () => {    return gulp.src(path.js.src)        .pipe(babel({            presets: ['@babel/env'] //es6转es5        }))        .pipe(uglify()) //执行压缩        .pipe(gulp.dest(path.js.dest))}const watch = () => {//监听文件,文件改变执行对应的任务    gulp.watch(path.html.src, htmlCompress)    gulp.watch(path.scss.src, scssCompile)    gulp.watch(path.html.src, cssCompress)    gulp.watch(path.js.src, jsCompress)}// const server = () => {//     // 创建服务器//     connect.server({//         root: 'dist',//根目录//         port: '2000',//端口号  //         livereload: true //服务器热更新//     })// }const createServer = () => {    return gulp.src('./dist')        .pipe(webserver({ //创建服务器            port: '3000', //端口号            host: 'xx.xx.xx.xxx',            open: '/dark-rankings.html', //默认打开路径            livereload: true, //热更新            middleware: [                proxy.createProxyMiddleware('/api', { //创建反向代理,请求已 /api 开头就使用target的服务器                    target: 'http://xxx.xxx.xxx.xx',                    changeOrigin: true                })            ]        })).pipe(connect.reload())}/* 以对象形式导出 *//* 同时运行多个任务 */module.exports.default = gulp.series(gulp.parallel(htmlCompress, scssCompile, cssCompress, jsCompress, watch, createServer));

共有1个答案

萧业
2023-07-14

推荐你用 Browserify。用 Browserify 和 Gulp 的示例配置:

先安装:

npm install --save-dev vinyl-source-stream vinyl-buffer browserify babelify
const gulp = require('gulp');const htmlMin = require('gulp-htmlmin');const autoprefixer = require('gulp-autoprefixer');const cleanCss = require('gulp-clean-css');const browserify = require('browserify');const babelify = require('babelify');const source = require('vinyl-source-stream');const buffer = require('vinyl-buffer');const uglify = require('gulp-uglify');const connect = require('gulp-connect');const webserver = require('gulp-webserver');const proxy = require('http-proxy-middleware');const sass = require('gulp-sass')(require('sass'));const path = {  html: {    src: 'src/**/*.html',    dest: 'dist'  },  css: {    src: 'src/**/*.css',    dest: 'dist'  },  js: {    src: 'src/**/*.js',    dest: 'dist'  },  scss: {    src: 'src/**/*.scss',    dest: 'dist'  }};const htmlCompress = () => {  return gulp.src(path.html.src)    .pipe(htmlMin({      removeComments: true,      collapseWhitespace: true,      collapseBooleanAttributes: true,      removeEmptyAttributes: true,      removeScriptTypeAttributes: false,      removeStyleLinkTypeAttributes: true,      minifyJS: true,      minifyCSS: true    }))    .pipe(gulp.dest(path.html.dest));};const scssCompile = () => {  return gulp.src(path.scss.src)    .pipe(sass().on('error', sass.logError))    .pipe(gulp.dest(path.scss.dest));};const cssCompress = () => {  return gulp.src(path.css.src)    .pipe(autoprefixer({      cascade: false    }))    .pipe(cleanCss())    .pipe(gulp.dest(path.css.dest));};const jsCompress = () => {  return browserify({      entries: './src/js/main.js', // 入口文件路径,根据你的实际情况进行修改      debug: true    })    .transform(babelify, {      presets: ['@babel/preset-env']    })    .bundle()    .pipe(source('output.js'))    .pipe(buffer())    .pipe(uglify())    .pipe(gulp.dest(path.js.dest));};const watch = () => {  gulp.watch(path.html.src, htmlCompress);  gulp.watch(path.scss.src, scssCompile);  gulp.watch(path.css.src, cssCompress);  gulp.watch(path.js.src, jsCompress);};const createServer = () => {  return gulp.src('./dist')    .pipe(webserver({      port: '3000',      host: 'xx.xx.xx.xxx',      open: '/dark-rankings.html',      livereload: true,      middleware: [        proxy.createProxyMiddleware('/api', {          target: 'http://xxx.xxx.xxx.xx',          changeOrigin: true        })      ]    }))    .pipe(connect.reload());};module.exports.default = gulp.series(  gulp.parallel(htmlCompress, scssCompile, cssCompress, jsCompress),  gulp.parallel(watch, createServer));

主要修改的部分加了 browserify 和 vinyl-source-stream :

const browserify = require('browserify');const source = require('vinyl-source-stream');const buffer = require('vinyl-buffer');

修改了jsCompress 任务的内容:

const jsCompress = () => {  return browserify({      entries: './src/js/main.js', // 入口文件路径,      debug: true    })    .transform(babelify, {      presets: ['@babel/preset-env']    })    .bundle()    .pipe(source('output.js'))    .pipe(buffer())    .pipe(uglify())    .pipe(gulp.dest(path.js.dest));};
 类似资料:
  • 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下。 gulp 代码 你可以 下载

  • 我在用量角器做测试。99%的情况下,不需要实际查看浏览器,测试需要很长时间,而我们感兴趣的只是最终结果。有没有一种方法可以隐藏为测试而打开的浏览器(例如在后台运行)?

  • 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 访问论坛获取帮助 压缩 css 代码可降低 css 文件大小,提高页面打开速度。 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 当熟悉 使用 g

  • 我试图通过PHP代码创建一个.zip文件,并通过浏览器在localhost上下载它。下载的zip无法解压缩,并给出如下错误消息: 归档:未找到upload_pnt-prs.zip中央目录结束签名。要么这个文件不是zipfile,要么它构成了多部分归档的一个磁盘。在后一种情况下,中央目录和zipfile注释将在这个归档的最后一个磁盘上找到。解压缩:在upload_pnt-prs.zip或upload

  • 问题内容: 在Windows 7上,我已按以下说明安装了gulp:http : //markgoodyear.com/2014/01/getting-started-with- gulp/ : 在我的应用文件夹中: 我创建一个文件。 但是,当我尝试运行时,出现以下错误消息: 等等 但是存在于(在本地应用程序文件夹中): 知道可能是什么原因吗? 问题答案: 更新 从更高版本开始,无需手动安装gulp

  • 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 访问论坛获取帮助 压缩 图片文件可降低文件大小,提高图片加载速度。 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 一、安装 gulp-imagemi