gulp常用插件之gulp-uglify使用(代码片段)

jiaoshou jiaoshou     2023-04-27     408

关键词:

更多gulp常用插件使用请访问:gulp常用插件汇总


gulp-uglify这是一款使用UglifyJS缩小js文件。

更多使用文档请点击访问gulp-uglify工具官网

安装

一键安装不多解释

npm install --save-dev gulp-uglify

使用

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;

gulp.task('compress', function () 
  return pipeline(
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
  );
);

为了帮助正确处理Node流的错误情况,该项目建议使用 pipelinefrom中的readable-stream

Options
支持UglifyJS API中的大多数minify选项。有一些例外:
sourceMap不得设置该选项,因为它将根据您的Gulp配置自动进行配置。请参阅Gulp源地图的文档

Errors
gulp-uglify如果无法缩小特定文件,则发出“错误”事件。该插件导出GulpUglifyError构造函数以进行instanceof检查。它包含以下属性:

  • fileName:要缩小的文件的完整文件路径。
  • cause:原始的UglifyJS错误(如果有)。
    大多数UglifyJS错误消息具有以下属性:
  • message(或msg)
  • filename
  • line

使用不同的UglifyJS
默认情况下,gulp-uglify使用安装的UglifyJS版本作为依赖项。可以使用“ composer”入口点配置使用其他版本。

var uglifyjs = require('uglify-js'); // 可以是git checkout 
                                     // 或其他模块(例如ES6支持的`uglify-es`)
var composer = require('gulp-uglify/composer');
var pump = require('pump');

var minify = composer(uglifyjs, console);

gulp.task('compress', function (cb) 
  // 与上述相同的选项
  var options = ;

  pump([
      gulp.src('lib/*.js'),
      minify(options),
      gulp.dest('dist')
    ],
    cb
  );
);

gulp插件gulp-uglify

npminstallgulp-uglify--save-dev//基本使用vargulp=require(‘gulp‘),uglify=require(‘gulp-uglify‘);gulp.task(‘jsmin‘,function(){gulp.src(‘src/js/index.js‘).pipe(uglify()).pipe(gulp.dest(‘dist/js‘));});//压缩多个j 查看详情

gulp常用插件之gulp-imagemin使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-imagemin这是一款缩小PNG,JPEG,GIF和SVG图像的插件。更多使用文档请点击访问gulp-imagemin工具官网。安装一键安装不多解释npminstall--save-devgulp-imagemin使用基本的使用:constgulp=require(&... 查看详情

gulp常用插件之gulp-beautify使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-beautify这是一款使用js-beautify进行资产美化插件。更多使用文档请点击访问gulp-beautify工具官网。安装一键安装不多解释npminstall--save-devgulp-beautify使用这是js-beautify的gulp插件。varbea... 查看详情

gulp常用插件之gulp-plumber使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-plumber这是一款防止因gulp插件的错误而导致管道中断,plumber可以阻止gulp插件发生错误导致进程退出并输出错误日志。更多使用文档请点击访问gulp-plumber工具官网。安装npminstall--s... 查看详情

gulp常用插件之gulp-notify使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-notify这是一款gulp通知插件。更多使用文档请点击访问gulp-notify工具官网。安装一键安装不多解释npminstall--save-devgulp-notify使用例1:varnotify=require("gulp-notify");gulp.src("./src... 查看详情

gulp之gulp-uglify模块

gulp-uglify功能:压缩js资源gulpfile.js:vargulp=require(‘gulp‘);varuglify=require(‘gulp-uglify‘);gulp.task(‘jsUglify‘,function(){gulp.src(‘src/*.js‘).pipe(uglify({})).pipe(gulp.dest(‘dest/‘));});效果:  源文件:     查看详情

gulp常用插件之gulp-babel使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-babel这是Babel的Gulp插件。此自述文件适用于gulp-babelv8+Babelv7检查7.x分支以了解使用Babelv6的文档更多使用文档请点击访问gulp-babel工具官网。安装安装gulp-babel,如果你想获得的下一... 查看详情

gulp常用插件之gulp-useref使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的... 查看详情

gulp常用插件之gulp-rev-collector使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射,去替换文件名称,也可以替换路径。更多使用文档请点击访问gulp-rev-collector工具官网。安装一键安装不多解释npminstall-... 查看详情

gulp常用插件之gulp-rev-rewrite使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-rev-rewrite这是一款重写对由gulp-rev修订的资产的引用。更多使用文档请点击访问gulp-rev-rewrite工具官网。安装一键安装不多解释npminstall--save-devgulp-rev-rewrite使用最常见的使用模式包... 查看详情

gulp常用插件之wiredep使用

更多gulp常用插件使用请访问:gulp常用插件汇总wiredep这是一款gulp插件,能够将js、css文件自动插入到html中。更多使用文档请点击访问wiredep工具官网。Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript... 查看详情

gulp教程之静态资源压缩(代码片段)

1创建项目安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件,项目目录如下:2压缩插件简介gulp-useref合并html里面的js/cssgulp-concat用于合并文件,把也就是多个文件合并到一个文件中,以节省存储空间gulp.spritesmith图... 查看详情

gulp常用插件之rev-del使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总rev-del这是一款从模块(如gulp-rev)生成的修订清单中删除旧的、未使用的指纹文件。更多使用文档请点击访问rev-del工具官网。安装一键安装不多解释npminstall--save-devrev-del使用revDel(ol... 查看详情

gulp-uglify压缩javascript文件

1、安装gulp-uglify命令行输入npminstallgulp-uglify--save-dev;2、配置文件2.1基本使用vargulp=require(‘gulp‘),  uglify=require(‘gulp-uglify‘);  //获取uglify插件gulp.task(‘jsmin‘,function(){gulp.src(‘src/js/index.js‘)     //引入 查看详情

gulp常用插件之gulp-inject使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-inject这个插件的作用与wiredep类似,不同的是可以自己任意指定需要插入文件的列表。它同样是利用注释来寻找插入的位置。获取源文件流,将每个文件转换为字符串,并将每个... 查看详情

gulp构建前端自动化工作流之:常用插件介绍及使用

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境。本文主要分为6个段落:1.构建项目目录结构(DirectoryStructureBuild)2.插件介绍及使用方法(Tasksanddependencies)3.扩展优化(Extend&OptimizeTask)4.其他插... 查看详情

前端构建之--gulp(代码片段)

gulp相关插件:1、del删除文件,用于清空文件2、browser-sync用于自动刷新浏览器3、gulp-htmlmin用于压缩html4、gulp-clean-css压缩css5、gulp-uglify压缩js6、gulp-replace替换路径7、gulp-base64将小图背景图转换为base64的形式,可以自己设置最大多... 查看详情

gulp介绍及常用插件使用方法(代码片段)

...让我们可以专注于代码,提高工作效率。一、API介绍gulp常用的API只有四个:gulp.task(),gulp.src(),gulp.dest(),gulp.watch() 1.gulp.src()输出(Emits)符合所提供的匹配模式(glob)或者匹配模式 查看详情