本帖最后由 neekin 于 2018-1-11 17:08 编辑
更多前端资源敬请关注
the secret make a javascript secret!
经常说gulp是前端构建打包工具，我们已经说完了构建，那么今天说说压缩。 前端代码需要部署的时候，无非就是已有的代码进行压缩，混淆， 例如有这么一段代码 [JavaScript] 纯文本查看 复制代码 function test(){
var hello = 'world';
console.log(hello);
}进行混淆压缩后大概会长这样 [JavaScript] 纯文本查看 复制代码 function t(){ var h='world' console.log(h);}
会将代码的变量函数名精简，会删除不必要的空格等。 这样，代码发布的生产环境的时候能节省很多网络流量，而且别人查看你网站代码的，也只能看到一堆混效过的代码，抄起来也比较累,达到一定的代码保护作用。 话不多说,咱们开始吧 首先在src目录下 创建一个 script目录,在下面创建一个test.js文件,输入以下代码 [JavaScript] 纯文本查看 复制代码 var hello = 'World';
console.log(hello);
同时,在partial目录下,创建一个script.ejs文件. 输入以下代码 [JavaScript] 纯文本查看 复制代码 <script src='script/test.js'></script> 然后在index.ejs里 你的代码应该是这样的,我们在最末尾引入script.ejs文件,达到一个组件化的目的
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<%include partial/style.ejs %>
</head>
<body>
<%include partial/header.ejs %>
<%= msg %>
<%include partial/footer.ejs %>
<%include partial/script.ejs %>
</body>
</html>
然后在控制台里面 输入命令
[Shell] 纯文本查看 复制代码 npm install gulp-uglify --save-dev
修改我们的gulpfile.js,添加压缩js任务
[JavaScript] 纯文本查看 复制代码 var gulp = require('gulp');
var ejs = require('gulp-ejs')
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('default', ['serve']);
//监听任务,监听如果有文件变动,触发reload任务
gulp.task("watch", function() {
return gulp.watch(["./src/**/*.*"], ["reload"]);
});
//reload任务,执行之前调用html任务
gulp.task("reload", ['ejs'], function(cb) {
return browserSync.reload();
});
//开启服务器任务,调用ejs和监听任务
gulp.task('serve', ['ejs', 'watch'], function() {
browserSync.init({
files: "./**/*",
server: "./dist"
});
});
gulp.task('ejs', ["style", 'js'], function() {
return gulp.src("./src/*.ejs")
.pipe(ejs({ msg: 'Hello Gulp!' }, {}, { ext: '.html' }))
.pipe(gulp.dest("./dist"))
})
gulp.task('style', function() {
return gulp.src('./src/**/*.css')
.pipe(gulp.dest("./dist"))
})
gulp.task('js', function() {
return gulp.src('./src/**/*.js')
.pipe(uglify({ mangle: { toplevel: true } }))
.pipe(gulp.dest('./dist'))
})
这样就能达到js压缩并混淆的目的,但在实际开发过程中,我们其实并不会压缩JS代码,而是在开发完后,需要部署到服务时才需要进行压缩混淆,所以下次预告,我们来来说说打包的事儿.
| 
收藏
淘帖
踩
