gulp压缩整站方法（htmlcssjsimage）

注入package.json(此json文件需要自己在当前项目目录下创建即可--不能有注释)安装：

npm install gulp-uglify --save-dev

全局安装：

npm install gulp-uglify -g

整站静态文件压缩配置文件gulpfile.js（html/css/image/js前提是安装下列require用到的模块）：

var gulp = require('gulp'),//基础库

    htmlmin = require('gulp-htmlmin'),//html压缩

cssmin = require('gulp-minify-css'),//css压缩

jshint = require('gulp-jshint'),//js检查

uglify = require('gulp-uglify'),//js压缩

imagemin = require('gulp-imagemin'),//图片压缩

    pngquant = require('imagemin-pngquant'),//图片深入压缩

imageminOptipng = require('imagemin-optipng'),

    imageminSvgo = require('imagemin-svgo'),

    imageminGifsicle = require('imagemin-gifsicle'),

    imageminJpegtran = require('imagemin-jpegtran'),

domSrc = require('gulp-dom-src'),

cheerio = require('gulp-cheerio'),

processhtml = require('gulp-processhtml'),

Replace = require('gulp-replace'),

cache = require('gulp-cache'),//图片压缩缓存

clean = require('gulp-clean'),//清空文件夹

conCat = require('gulp-concat'),//文件合并

plumber=require('gulp-plumber'),//检测错误

gutil=require('gulp-util')//如果有自定义方法，会用到

var date = new Date().getTime()

gulp.task('clean',function(){

return gulp.src('min/**',{read:false})

.pipe(clean())

})

function errrHandler( e ){

    // 控制台发声,错误时beep一下

    gutil.beep()

    gutil.log(e)

this.emit('end')

}

gulp.task('cleanCash', function (done) {//清除缓存

    return cache.clearAll(done)

})

gulp.task('htmlmin', function () {

    var options = {

        removeComments: true,//清除HTML注释

        collapseWhitespace: true,//压缩HTML

        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/>==><input />

        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" />==><input />

        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

        minifyJS: true,//压缩页面JS

        minifyCSS: true//压缩页面CSS

    }

    gulp.src(['index/*.htm','index/*.html'])

.pipe(plumber({errorHandler:errrHandler}))

.pipe(Replace(/_VERSION_/gi, date))

.pipe(processhtml())

        .pipe(htmlmin(options))

        .pipe(gulp.dest('min'))

})

gulp.task('cssmin', function(){

    gulp.src('index/**/*.css')

.pipe(conCat('css/index.min.css'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cssmin({

            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]

            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

            keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]

            keepSpecialComments: '*'

            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀

        }))

        .pipe(gulp.dest('min'))

})

gulp.task('jsmin', function () {

    gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])

.pipe(conCat('js/index.min.js'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(uglify({

            mangle: {except: ['require' ,'exports' ,'module' ,'$']},//类型：Boolean 默认：true 是否修改变量名

            compress: true,//类型：Boolean 默认：true 是否完全压缩

            preserveComments: 'false' //保留所有注释

        }))

        .pipe(gulp.dest('min'))

}) 

gulp.task('imagemin', function () {

    gulp.src('index/**/*.{png,jpg,gif,ico}')

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cache(imagemin({

            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片         

svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性

            use: [pngquant(),imageminJpegtran({progressive: true})

            , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件         

        })))

        .pipe(gulp.dest('min'))

})

gulp.task('default',['clean'],function(){

gulp.start('cssmin','htmlmin','jsmin','imagemin')

})

package.json(例子) package.json详细介绍：https://docs.npmjs.com/files/package.json

（package.json  npm init 命令行创建文件方法http://blog.csdn.net/liyanhui1001/article/details/44020235 ）

{

  "name": "web",

  "version": "1.0.0",

  "description": "my text",

  "main": "gulpfile.js",

  "dependencies": {

    "gulp": "^3.9.1",

    "gulp-cache": "^0.4.5",

    "gulp-concat": "^2.6.0",

    "gulp-htmlmin": "^2.0.0",

    "gulp-imagemin": "^3.0.1",

    "gulp-jshint": "^2.0.1",

    "gulp-minify-css": "^1.2.4",

    "gulp-plumber": "^1.1.0",

    "gulp-uglify": "^1.5.4",

    "gulp-util": "^3.0.7",

    "imagemin-pngquant": "^5.0.0",

    "jshint": "^2.9.2",

    "gulp-clean": "^0.3.2"

  },

  "devDependencies": {

    "gulp-cheerio": "^0.6.2",

    "gulp-dom-src": "^0.2.0",

    "gulp-jslint": "^1.0.1",

    "gulp-processhtml": "^1.1.0",

    "gulp-rename": "^1.2.2",

    "gulp-replace": "^0.5.4",

    "gulp-webpack": "^1.5.0",

    "imagemin-gifsicle": "^5.1.0",

    "imagemin-jpegtran": "^5.0.2",

    "imagemin-optipng": "^5.1.1",

    "imagemin-svgo": "^5.1.0",

    "webpack": "^1.13.1"

  },

  "scripts": {

    "test": "echo \"Error: no test specified\" &&exit 1"

  },

  "keywords": [

    "web"

  ],

  "author": "yl",

  "license": "ISC"

}

devDependencies里的内容即为你安装gulp的模块插件名称和版本号！

最后，node.js里指定到当前项目目录下输入gulp命令即可：

gulp default

1. 严格一点的做法是用git，SVN这样的工具生成版本。粗糙一点的做法是直接重命名：

....

 gulp.src('app/*')

    .pipe(gulp.dest('app-v1.0'))

....

2. 比较简单点妥当点的方法是使用gulp-rev和gulp-rev-collector搭配使用，以保证文件间引用的文件名的完整性（推荐做法）：

分两步：

给文件名加MD5后缀，（文件的名称发生改变）例：a.css  变成 a-0fsd1w45.css

把引用到该文件的其他文件的代码进行替换。例如：<link href="./a.css">需要替换为<link href="./a-0fsd1w45.css">才能准确引入。

// 下面是 插件的示例代码：

var gulp = require('gulp')

var rev = require('gulp-rev')

gulp.task('css', function () {

    return gulp.src('src/css/*.css')

        .pipe(rev())

        .pipe(gulp.dest('dist/css'))

        .pipe( rev.manifest() )

        .pipe( gulp.dest( 'rev/css' ) )

})

gulp.task('scripts', function () {

    return gulp.src('src/js/*.js')

        .pipe(rev())

        .pipe(gulp.dest('dist/js'))

        .pipe( rev.manifest() )

        .pipe( gulp.dest( 'rev/js' ) )

})

...

var revCollector = require('gulp-rev-collector')

var minifyHTML   = require('gulp-minify-html')

gulp.task('rev', function () {

    return gulp.src(['rev/**/*.json', 'templates/**/*.html'])

       // 替换引用文件路径。这里面还是有坑的，多试几遍。

        .pipe( revCollector({

            replaceReved: true,

            dirReplacements: {

                'css': '/dist/css',

                '/js/': '/dist/js/',

                'cdn/': function(manifest_value) {

                    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value

                }

            }

        }) )

        .pipe( minifyHTML({

                empty:true,

                spare:true

            }) )

        .pipe( gulp.dest('dist') )

})

解决webpack打包、编译、热更新Node内存不足问题_node内存不够_Vgb...

既然知道了问题所在,那么就好解决了,面向百度编程,百度搜索如何解决Node运行内存不足的问题马上就有了解决办法,increase-memory-limit可以提高Node占用内存。npm i -g increase-memory-limit安装包,然后在项目目录执行increase-memory-limit,...

继续访问

node打包内存不足问题解决方式:Allocation failed - JavaScript heap out...

直接在node后面写上--max_old_space_size=4096就好了,我这里设置的内存大小是4G,这个具体的大小可以根据自己的项目情况来设置就好了。然后再重新运行npm run build就可以正常打包构建了。

继续访问

gulp-htmlparser:使用 gulp 将 html 解析为 js 对象

#gulp-htmlparser 插件解析HTML用 包裹 gulp-htmlparser 描述 使用 gulp 将 html 解析为 js 对象 节点版本 >= 0.9 吞咽版 3.x 用法 安装 npm install gulp-htmlparser --save ＃＃例子 var gulp = require ( 'gulp' ) var gparser = require ( 'gulp-htmlparser' ) gulp . task ( 'task' , function ( ) { gulp . src ( 'normal.html' ) . pipe ( gparser ( ) ) . pipe ( gulp . dest ( './' ) ) } ) gulp . task ( 'default' , 'task' )

node 内存 溢出 插件

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。 现象描述 昨天用webpack打包Vue的项目时，node内存溢出而停止build项目，即是项目构建过程中频繁报内存溢出：FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。并且打包速度相当慢...

继续访问

npm命令运行时报错_npm命令报错整理_我自来去的博客

二. 内存溢出内存不足 描述 远程连接win32位的服务器 在项目目录下执行打包命令 npm run build 报以上错误内容 内存溢出 内存不足 解决一 修改package.json中的内存大小 修改package.json文件中size的大小,然后重新执行打包命令 ...

继续访问

vscode执行npm时的一些错误及处理_蓝色格子的博客

这个原因是JavaScript堆内存不足。 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1 2.2、解决 通过安装increase-memory-limit插件。命令:npm install -g increase-memory-lim...

继续访问

前端项目打包出现JavaScript堆内存不足、启动也会内存溢出解决办法\increase-memory-limit‘ 不是内部或外部命令,

打包出现JavaScript堆内存不足 最近打包遇到这种报错 Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 以及 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 解决方法如下： 1.从网上搜索的资料试了一下，不大好用，不过也照做了 修改 package

继续访问

最新发布 npm 打包报错JavaScript heap out of memory（亲测可行）

npm 打包报错JavaScript heap out of memory（亲测可行）

继续访问

npm运行项目提示JavaScript heap out of memory（堆栈内存溢出问题）解决方案

1、堆栈内存溢出问题 npm ERR! code ELIFECYCLE npm ERR! errno 134 npm ERR! king-tech-front-frame@1.0.0 dev: `vue-cli-service serve` npm ERR! Exit status 134 npm ERR! npm ERR! Failed at the king-tech-front-frame@1.0.0 dev script. npm ERR! This is probably not a proble

继续访问

npm执行报内存溢出，内存不够很使用

您需要增加节点允许的内存量。 您可以通过以下方式在全局范围内执 打开一个cmd窗口 跑 setx NODE_OPTIONS --max_old_space_size=10240 针对本地调试使用。 关闭所有cmd /代码编辑器 重新打开cmd并再次运行节点命令（npm等） ...

继续访问

npm 执行中遇到的问题

ubuntu@ip-10-200-100-47:~/pinpoint-backend$ npm run build >pinpoint-backend@0.0.1 prebuild /home/ubuntu/pinpoint-backend >rimraf dist >pinpoint-backend@0.0.1 build /home/ubuntu/pinpoint-b...

继续访问

vue3+vite+ts打包时遇到的问题以及“优化”，JavaScript heap out of memory（错误：内存不足）等

如果用了element plus可能打包会出现这个报错。在tsconfig.json里加这代码就行。vue3+vite+ts打包时报错。

继续访问

npm run dev/build内存溢出解决方法，亲测有效（JavaScript heap out of memory）

npm run dev内存溢出解决方案

继续访问

vue项目运行时报内存溢出：JavaScript heap out of memory

原文链接：https://blog.csdn.net/u014028247/article/details/120198702 ==== JS stack trace ========================================= 0: ExitFrame [pc: 000002AACBF079E0] Security context: 0x00b4d151e6e9 <JSObject>1: byteLength(aka byteLength) [00

继续访问

gulp html 缓存,gulp解决浏览器缓存问题

给请求的文件加上唯一的版本号，这样浏览器就会加载新文件，防止因缓存产生的问题。下面是用gulp-rev生成md5签名，构建好的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。安装插件npminstall--save-devgulpnpminstall--save-devgulp-revnpminstall--save-devgulp-rev-collect...

继续访问

npm run build 报错 JavaScript heap out of memory &node -- max-old-space-size=4096不是内部或外部命令

npm run build 报错 JavaScript heap out of memory node -- max-old-space-size=4096不是内部或外部命令

继续访问

nodejs运行时 内存不足解决方案

找到nodejs运行配置文件目录 window下目录位置 C:\Users\39716(用户名)\AppData\Roaming\npm 找到内存不足发生的环境比如 webpack 打开webpack.cmd 添加 --max_old_space_size=4096 @IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\n...

继续访问

JS stacktrace--解决运行npm run serve 后报错，node内存溢出问题

拉去vue项目，运行npm run serve 后，报错如下 <--- JS stacktrace --->==== JS stack trace ========================================= 0: ExitFrame [pc: 0000002919A5C5C1] Security context: 0x02b9c119e6e9 <JSObject>1: _send [0000016FEC87BBF1] [intern

继续访问

node：内存溢出（报错：CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足）

描述：项目运行npm run dev 运行一定次数（我这里只能保存一次，第二次保存就报错，需要重新运行npm run dev，很耗费时间）后报错 报错：CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 翻译：CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足 进过各种搜索，找到关于问题的解决方法—node内存溢出 解决方法： CMD,进入命令行 复制粘贴命令：setx NODE_OPTION

继续访问

npm run build打包提示heap out of memory

npm打包报 heap out of memory的解决办法。

继续访问

运行npm start报错堆内存不足

报错 解决： "scripts": { "start": "node --max-old-space-size=4096 dev.js", "build": "webpack --progress --profile --colors --config webpack.prod.config.js", "test": "echo \"Error: no test...

继续访问

node内存溢出（报错：CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足）

描述：项目运行npm run dev 运行一定次数（我这里只能保存一次，第二次保存就报错，需要重新运行npm run dev，很耗费时间）后报错 报错：CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 翻译：CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足 进过各种搜索，找到关于...

继续访问

热门推荐 执行 npm 命令时报错：Allocation failed - JavaScript heap out of memory

执行 npm 命令时报错： FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 原因是 JavaScript堆内存不足，Node 是基于V8引擎，在 Node 中通过 JavaScript 使用内存时只能使用部分内存（64位系统下约为1.4 GB），如果内存不足，可以用下面方法来放宽V8默认的内存限制。 法一：添加参数--max_old_spa.

继续访问

npm 报错内存不足

node.js

---