gulp-uglify 压缩js

前提：已经安装有安装了node 和npm 环境

安装gulp

假设已经安装了node 和npm （淘宝的cnpm很适合国内使用）。

1、首页全局安装gulp。

1 npm install --global gulp

2、其次局部安装gulp。（注：局部安装是安装到你项目的根目录，这是很多教程没有清晰表明）

npm install gulp --save-dev

3、在项目根目录下创建一个名为 gulpfile.js 的文件

// 引入 gulp及组件
var gulp = require('gulp');gulp.task('default',function(){gulp.start('minify');
});//JS处理
gulp.task("minify",function(){... ...})

View Code

4、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp <task> <othertask>）

gulp

5、安装压缩组件 gulp-uglify

npm install  gulp-uglify --save-dev

在上述 gulpfile.js 的文件里，写入：

var gulp = require('gulp');
var uglify = require('gulp-uglify');gulp.task('default',function(){gulp.start('minify');
});//JS处理
gulp.task("minify",function(){gulp.src(['./static/before/*.js']).pipe(uglify()).pipe(gulp.dest('./dest/after'))
})

运行gulp：

gulp

压缩AngularJS代码的时候，需要添加 ng-annotate 插件：

var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');gulp.task('default',function(){gulp.start('minify');
});//JS处理
gulp.task("minify",function(){gulp.src(['./static/before/*.js']).pipe(ngAnnotate()).pipe(ngmin({dynamic: false})).pipe(uglify()).pipe(gulp.dest('./dest/after'))
})

还有package.json中需要添加相应的：（即运行：npm install --save-dev gulp-ng-annotate 和 npm install --save-dev gulp-ngmin）

{"name": "application-name","version": "0.0.1","devDependencies": {"babel-preset-env": "^1.6.1","gulp": "^3.9.1","gulp-babel": "^7.0.0","gulp-clean": "^0.4.0","gulp-concat": "^2.6.1","gulp-jshint": "^2.1.0","gulp-minify-css": "^1.2.4","gulp-ng-annotate": "^2.1.0","gulp-ngmin": "^0.3.0","gulp-notify": "^3.1.0","gulp-rename": "^1.2.2","gulp-uglify": "^3.0.0"}
}

合并和压缩JS、CSS文件

压缩JS，CSS文件需要引用如下组件：

gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹

gulp-notify:提示

【关于 gulp中报错 Task 'default' is not in your gulpfile 的解决方式】

在末尾加上一个default任务就可以解决，即在gulpfile,js中添加default方法：

gulp.task('default',function(){    gulp.start('minify');});

转载于:https://www.cnblogs.com/miny-simp/p/8269127.html

gulp-uglify 压缩js相关推荐

webstorm 设置uglify 压缩js文件
第一步:打开npm,全局安装 npm install uglify-js -g 第二步: 打开webstorm的file->settings ->External Tools,点击左上角的 ...
ionic中使用Cordova Uglify 压缩js与css
参照:https://www.npmjs.com/package/cordova-uglify 安装:npm install cordova-uglify 安装完成之后,打开: hooks/uglif ...
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
需求分析:将js文件压缩成一行,减少js文件的大小.压缩过程中如果遇到js语法错误,将会报错并且压缩会被终止.所以我们需要: 在开发环境下,编写js代码时,要监听并检查js文件的语法,避免语法错误导致 ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
gulp 压缩html文件,gulp压缩js
请务必理解如下章节后阅读此章节: 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转 ...
gulp 压缩html内的js,gulp实战技巧之gulp-uglify压缩js
摘要: 前面讲了压缩css的几款插件,这篇就介绍下压缩js的一款插件--gulp-uglify.使用gulp-uglify可以压缩我们的js代码,也可以使用其提供的混淆功能对代码进行简单的混淆,注意是 ...
gulp压缩js转义es6的常见错误及解决方案
gulp压缩js转义es6的常见错误及解决方案参考文章: (1)gulp压缩js转义es6的常见错误及解决方案 (2)https://www.cnblogs.com/uimeigui/p/11797 ...
gulp代码压缩和制作雪碧图
安装nodejs gulp是基于nodejs,需要安装nodejs 在 [ nodejs官网 ]下载并安装nodejs 查看nodejs版本安装完nodejs后,在命令行中(window + r 输 ...
uglifyjs压缩js文件
UglifyJS 是一个服务端node.js的压缩程序,用来压缩js文件 (需要用到 node+npm node集成了npm) 下载安装uglify.js npm install uglify-js ...

gulp-uglify 压缩js

gulp-uglify 压缩js相关推荐

最新文章

热门文章