gulp 插件之 gulp-uglify

gulp-uglify 的简介:

使用 uglify 引擎,用来压缩 js 文件,加快网站响应速度。

一、gulp-uglify 插件的使用

1、安装 “gulp-uglify ”插件命令(在终端进入到项目根目录执行)

npm install --save-dev  gulp-load-plugins gulp-concat gulp-rename gulp-uglify

2、在项目根目录下提供 "gulp-uglify" 插件任务配置需要的 src 目录和源文件(源文件放置到 src 目录下)

mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-uglify"

 具体示例:var gulp = require(‘gulp‘),          plugins = require(‘gulp-load-plugins‘)();    // 装载插件      gulp.task(‘uglify‘, function () {                    // 自定义 "uglify" 任务    return gulp.src(‘src/*.js‘)                         // 模糊匹配 src 目录下所有 js 文件         .pipe(plugins.concat(‘libs.js‘))             // 合并匹配到的 js 文件并命名为 "libs.js"        .pipe(plugins.uglify({                        mangle: true,                      // 类型:Boolean 默认:true 是否修改变量名                        compress: true,                   // 类型:Boolean 默认:true 是否完全压缩                        preserveComments: ‘all‘     // 保留所有注释        }))        .pipe(plugins.rename(‘libs.min.js‘))     // 将匹配到的 js 文件合并压缩后重命名为 "libs.min.js"        .pipe(gulp.dest(‘dist/js‘));                    // 压缩后的文件存放路径});

4、最后在终端运行 "gulp uglify" 命令

PS:如果没有错误提示信息,证明就没什么问题了。现在去项目根目录下看是否生成 "dist/js" 目录和目标文件。未完待续。。。。

时间: 2024-11-03 21:56:21

gulp 插件之 gulp-uglify的相关文章

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

gulp插件使用

1 //引入gulp组件 2 var gulp=require('gulp'); 3 4 //创建任务 5 gulp.task('hello',function(){ 6 console.log('hello'); 7 }); 8 //创建另一个任务 9 gulp.task('world',function(){ 10 console.log('world'); 11 }); 12 //默认执行两个任务 13 //一个gulpfile.js中只能有一个default 14 //三种写法,3个参数

gulp插件

gulp教程之gulp-livereloadgulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面.[事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便.]特别是引用外部资源时,刷新整个页面真是费时费力. 安装:命令提示符执行 cnpm install gulp-livereload --save-dev gulp教程之gulp-autoprefixer使用gulp-autoprefixer根据设置浏览器版本自动处理浏览

如何编写一个gulp插件

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp是基于through

Gulp 插件

Gulp 插件 前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gul

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G

gulp 插件之 gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache

gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache 的简介: gulp-imagemin 插件用来压缩图片文件(包括 png,jpeg,gif 和 svg 图片). imagemin-pngquant-gfw 插件用来深度压缩 png 格式图片文件. gulp-cache 插件用来读取缓存文件.压缩图片可能会占用较长时间,使用 "gulp-cache" 插件可以减少重复压缩. 一."gulp-imagemin,imagemin-p

gulp 插件之 gulp-livereload

gulp-livereload 的简介: gulp-livereload 插件用于实时重载,当 html,css 文件内容发生改变时,浏览器会自动刷新页面.在使用 gulp-livereload 插件时需要浏览器安装相应的 liveReload 插件(浏览器插件) 一.gulp-livereload 插件的使用 1.全局安装 http-server 模块命令(用于提供 web 服务) npm install -g http-server 2.安装 "gulp-livereload"插件

gulp 插件之 gulp-less,gulp-sass 和 gulp-sourcemaps

gulp-less,gulp-sass 和 gulp-sourcemaps 的简介: gulp-less 插件用来将 less 文件编译成 css文件. gulp-sass 插件用来将 sass 文件编译成 css 文件. gulp-sourcemaps 插件用来生成 sourcemap 文件.用于当 less 或 sass 文件中有各种引入关系时,编译后就不容易找到对应的 less 或 sass 文件,所以需要生成 sourcemap 文件,方便修改. 一.gulp-less,gulp-sas

Gulp插件autoprefixer的使用

1.创建:gulpfile.js //引入插件 var gulp = require('gulp'); var autoprefixer = require('gulp-autoprefixer'); //默认执行任务 gulp.task('default', function () { //找到src目录下app.css,为其补全浏览器兼容的css return gulp.src('src/app.css') .pipe(autoprefixer({ browsers: ['last 2 ve