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));
推荐你用 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