A. gulp混淆压缩后的js能不能还原
可以通过生成 sourcemap 来还原。
可以了解一下 gulp-sourcemaps 这个模块
B. gulp压缩合并css/js时,怎么自动修改引用压缩后的css/js的路径
记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件,当然这一系列操作都是用基于gulp插件的,主要会用到下面的几个插件:
var concat = require('gulp-concat');//- 多个文件合并为一个;var minifyCss = require('gulp-minify-css');//- 压缩CSS为一行; var rev = require('gulp-rev');//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector');//- 路径替换
安装Gulp插件到本地项目
npm init//- 生成一个 package.json,里面是一些常规的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安装插件到项目目录内
完成上面两步后,会在我们的项目内生成一个package.json文件以及一个node_moles目录
创建配置文件 gulpfile.js
在项目根目录内创建一个 gulpfile.js 文件(必须是这个文件名哟~),内容就是上面几个插件的配置信息:
var gulp = require('gulp');var concat = require('gulp-concat'); //- 多个文件合并为一个;var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行;var rev = require('gulp-rev'); //- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector'); //- 路径替换gulp.task('concat', function() { //- 创建一个名为 concat 的 task
gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css']) //- 需要处理的css文件,放到一个字符串数组里
.pipe(concat('wap.min.css')) //- 合并后的文件名
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('./css')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev')); //- 将 rev-manifest.json 保存到 rev 目录内});
gulp.task('rev', function() {
gulp.src(['./rev/*.json', './application/**/header.php']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('./application/')); //- 替换后的文件输出的目录});
gulp.task('default', ['concat', 'rev']);
运行结果
通过以上的配置之后,就可以开始运行 gulp 对我们的项目进行相关的操作啦;
使用 gulp 命令,运行Gulp.js 构建程序
首先运行 concat 这个 task 生成一个 rev-manifest.json 文件
然后再运行 rev 这个 task 替换掉文件中引入的 css
YuanWingdeMacBook-Pro:m YuanWing$ gulp concat
[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:03] Starting 'concat'...
[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev
[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:17] Starting 'rev'...
[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$
rev-manifest.json文件内容:
{ "wap.min.css": "wap.min-c49f62a273.css"}
header.php替换前后对比:
替换前:<link rel="stylesheet" href="/css/wap.min.css" />
替换后:<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />
gulp-rev-collector进行文件路径替换是依据 rev-manifest.json 的,所以要先成生 .json 文件,然后再进行替换;
C. Gulp压缩图片后,文件夹内显示原文件和压缩后的图片,怎样删除原来的图片,只保留压缩后的图片
1、右击图片;2、选择“添加到压缩文件”;3、更改“压缩文件名”,选择“压缩文件格式”,点击“确定”,如下图:4、就完成了。得到图片对应的名字为123.zip压缩包。
D. 网站发布的时候批量混淆,压缩JS代码用什么工具
webpack gulp grunt, 推荐webpack
E. 给js,css代码压缩,混淆工具只有在线的吗,没有软件吗
软件应该也有,可以自己找找,只是应该还需要自己配置(大部分代码编辑器仅支持实时编译),还是需要自己手动。大部分人都选择自己动手写处理任务(例如gulp任务、grunt任务)。
F. 不依赖 Gulp,Babel,WebPack,还能优雅地写代码吗
不知道什么时候开始,前端开发已经到了不开一个 watcher 就无法工作的地步了。不依赖 Gulp、Babel、WebPack,还能优雅地写代码吗?
那我就带你来回顾一下这一切是怎么发生的。
从哪开始说好呢?我们就从‘前端打包’开始吧。
前端打包
很久以前(也就五年左右吧,但是五年前端已经大变样了),页面的 JS 压缩(混淆)一般是用谷歌的 closure compiler 做的。但是突然蹦出来个 Node.js,前端开发者们就开始第一次小试牛刀了,用 Node.js 来做 JS 压缩,一般都是用 uglify-js 来做。
JS 压缩做了,CSS 压缩是不是也可以做?JS lint 是不是也可以做?自动测试是不是也可以做?文件合并是不是也可以做?
于是 grunt 应运而生,它可以帮你把这些事情都做了,只需要配置一个简单的 Gruntfile 即可。
同一时期,AMD 和 CommonJS 也出现了,Node.js 用 CommonJS 加载模块,浏览器用 AMD 来加载模块。前端们觉得可以统一一下,都用 CommonJS 来写,于是用上 browserify 之类的工具。
好了,这个时候一个前端项目需要有一个 Grunt(后来又有了 Gulp 等)任务用来打包前端资源,看起来就是一个标配了。
框架的兴起
前端们一直吐槽新手们用 jQuery 写出的“意大利面条”式的代码,于是发明的了一些框架,一开始比较火的是 MVC 框架(如 Backbone.js),火了没多久,前端们发现 MVC 框架有很多相似的代码都是在做“绑定事件”“更新 view”这些事情了,于是发现了 MVVM 框架(一种早年间被微软玩过的设计模式),最着名的库就是 AngularJS。
此时的库都是不需要额外用 Grunt 做转译的。
直到 React 的出现。React 背后的工程师(显示不是前端)发明了一种新的语法——JSX,把 HTML 和 JS 混合起来写。前端们看了一眼表示这才是写模板正确的姿势。唯一的问题是这种语法浏览器不支持,于是需要把 JSX 翻译成 JS。
此时 Grunt 大概也因为性能太低被 Gulp 取代了。
于是此时用 React 的项目一定会去用 Gulp 将 JSX 翻译成 JS。
ECMAScript 的发展
同时期,ES 发展也是非常迅猛。
IE 8 不支持 ES5,于是前端们说,“IE 8 去死吧”,不想再支持 IE 8 了,因为那几年移动端发展迅猛,网页主要都是 H5 页面(不要问 H5 是不是 HTML5,不是 HTML5),所以很多前端确实不需要管 IE 8。现在想想,Windows Phone 的失败,真是前端的福音啊。
前端就开始追新了,一定要第一时间用上最新版的 JS 语法。但是即便是 Chrome 和 Firefox 也不可能那么快就支持最新语法。于是前端说,不过就是在 Gulp 里再加一道转译嘛,用 Babel 把 ES 2016 的语法转译成 ES 5 就好了。
于是 Gulp 里又多了一项任务。
重新思考
经过这两三年的飞速发展,前端们是不是应该重新思考一下,做一个网页之前要加这么多 Gulp 任务的初衷到底是什么?是否解决了问题。
从目前的结果来看,基本可以总结为
DOM 不好用,换成虚拟 DOM
CSS 不好用,换成 CSS in JS
浏览器支持的 JS 不好用,换成 ES 最新版语法,然后转译为浏览器支持的 JS
DOM Event 不用了,去新造一个 Event 机制。
Gulp 用得太多了 watch 很慢,于是加上了 hot mole replacement
基本把能抛弃的都抛弃了。
实际上这些变化非常适合复杂的 Web 应用,然而 90% 的页面根本不是单页面应用好吗!
能不能让我写一个 CSS 一个 JS 刷新一下就能看到效果!为什么我要花那么多时间来学习转译工具,以及解决转译过程中的各种问题。
总感觉‘弊大于利’。甚至有的时候觉得这是‘没有问题,创造问题也要上’。
G. gulp压缩js以后再怎么操作
1.css压缩 gulp-minify-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
由于压缩之前需要对js代码进行代码检测,压缩完成之后需要加上min的后缀,我们还需要安装另外两个插件:
4.重命名 gulp-rename
5.js代码检测 gulp-jshint (或gulp-jslint)
H. 用gulp压缩angurlar程序可以吗
gulp.task('uglify', function () {
gulp.src(['js/*.js']) //这里如果是 有很多js文件 ['js/*.js']
.pipe(uglify())
.pipe(rename({suffix: '.min'})) // 上面如果是 ['js/*.js'],要把所有的文件都添加.min.js后缀
.pipe(gulp.dest('js'));
});
I. 怎么用gulp压缩js和css文件
/步骤
首先要确保pc装nodeglobal环境项目文件都install gulp
npm install gulp -g (global环境)
npm install gulp --save-dev (项目环境)
项目install需要gulp插件般压缩需要
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
更插件链接找
项目根目录新建gulpfile.jsrequire需要mole
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
压缩css
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //压缩文件
.pipe(gulp.dest('minified/css')) //输文件夹
.pipe(minifycss()); //执行压缩
});
压缩js
gulp.task('minifyjs', function() {
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合并所jsmain.js
.pipe(gulp.dest('minified/js')) //输main.js文件夹
.pipe(rename({suffix: '.min'})) //rename压缩文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('minified/js')); //输
});
执行压缩前先删除文件夹内容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
默认命令cmd输入gulp执行命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});
要cmd执行gulp即
J. 为什么用gulp压缩js文件,有些文件压缩不了
方法: 1。 改表法。可能是你的帐号不允许从远程登陆,只能在localhost。这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 "user" 表里的 "host" 项,从"localhost"改称"%" mysql -u root -pvmwaremysql>use mysql;mysql>update user set host = '%' where user = 'root';mysql>select host, user from user; 2. 授权法。例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话。