Gulp uglify，rename和sourcemaps - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

【前端】我的Gulp配置

引入组件 // 保证在当前项目目录下曾经运行过： // npm install gulp-uglify gulp-rename gulp-babel babel-preset-es2015 .........require('gulp-sourcemaps'); var notify = require('gulp-notify'); // 把src/script下的所有coffee逐个编译为js, 放在...// 保证在当前项目目录下曾经运行过： // npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-babel babel-preset-es2015...('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var coffee.../public')) // distribution .pipe(uglify()) .pipe(rename('all.min.js')) .pipe(gulp.dest

3451 0

Gulp基本使用

gulp = require('gulp'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat')...@babel/core @babel/preset-env -D const gulp = require('gulp'); const uglify = require('gulp-uglify')...('gulp'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat'); const babel...'); const sourcemaps = require('gulp-sourcemaps'); const watcher = gulp.watch(['....gulp-uglify gulp-concat gulp-rename * sourcemap 保留了之前编译的代码使代码容易调试 * 出错，浏览器通过sorcemap恢复源代码 * cnpm

1.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个，Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。...rollup 模块和 rollup-plugin-babel（rollup 和 babel 之间的无缝集成插件）： $ npm install --save-dev gulp-better-rollup...("default", gulp.series(["babel", "watch"])) 使用 sourcemaps 和压缩注意压缩使用 rollup-plugin-uglify 插件，为了提升打包速度...安装 gulp-sourcemaps 和 rollup-plugin-uglify 插件： npm install --save-dev gulp-sourcemaps rollup-plugin-uglify...= require("rollup-plugin-uglify"); const sourcemaps = require("gulp-sourcemaps"); gulp.task("babel"

1.4K2 0

Gulp探究折腾之路(I)

(outPut)); }); 在gulpfile.js同级目录运行gulp scripts即可；PS:当然前提是您已经安装了nodejs，并且使用npm安装了代码中需要的插件gulp和gulp-uglify...对于所使用的插件可以一个个安装，同时也可以批量安装Like This： npm install gulp-concat gulp-uglify gulp-jshint [...] gulp-rename...": "~2.6.0", "gulp-uglify": "~1.4.2", "gulp-jshint": "~1.11.2", "gulp-rename": "~1.2.2...具体做法，首先将需要的插件全局环境下Down下来： npm install gulp gulp-concat gulp-rename gulp-uglify gulp-minify-css gulp-jshint....pipe(sourcemaps.init({loadMaps: true})) .pipe(uglify().on('error', gulpUtil.log)) // notice

2.3K8 0

Django打造大型企业官网（五）

4.6.切换轮播图的箭头样式以及显示和隐藏 templates/news/index.html ‹ { gulp.src("..../src/js/*.js") .pipe(sourcemaps.init()) .pipe(uglify().on('error',util.log)) .pipe(rename...({"suffix":".min"})) .pipe(sourcemaps.write()) .pipe(gulp.dest('....run方法 Banner.prototype.run = function () { this.loop(); this.listenArrowClick(); }; 4.8.小圆点结果和样式

1.3K4 0

基于gulp的前端自动化方案

"gulp-rev-append": "^0.1.8", "gulp-sequence": "^0.4.6", "gulp-sourcemaps": "^2.6.4",..."gulp-uglify": "^2.0.0", "uglify-js": "^3.3.9" } } 编写gulp脚本新建 gulpfile.js文件,并引入所需模块，这里我把路径统一写在...= require('gulp-autoprefixer'),//处理浏览器前缀 uglify = require('gulp-uglify'),//压缩js sourcemaps =...{png,jpg,gif,ico}', JS: '**/*.js' } 压缩处理css 这里需要排除node_modules文件夹和生成构建的后的目录/dist/及它们的子目录，直接 !...gulpfile.js']) .pipe(sourcemaps.init()) .pipe(gulpif(conditionJs, uglify())) .pipe(sourcemaps.write

1.3K6 0

如何为你的微信小程序瘦身？

这对减少代码尺寸和代码性能都是有好处的：）使用工具压缩优化代码在当今HTML5等Web前端项目的开发和发布中，我们通常会通过使用一些前端工程化工具来处理我们的代码，比如使用Gulp，结合一些功能插件...，如：uglify, cssnano, htmlmin等。...", "gulp-rename": "^1.2.2", "gulp-sourcemaps": "^2.2.1", "gulp-uglify": "^2.0.0", "run-sequence...iOS >= 8', 'Android >= 4.1' ]) ])) .pipe($.if(prod, $.cssnano())) .pipe($.rename.../src/**/*.js') .pipe($.babel()) .pipe($.if(prod, $.uglify())) .pipe(gulp.dest('.

9395 0

最流行的4种前端构建项目工具介绍

Grunt 和 Gulp 是在是前端的世界中最流行的解决方案，他们两个都有很多非常有用的插件。NPM（Node.js 的包管理器）则包含了他们两个。...require('gulp-concat'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps...', ['clean'], function() { // 压缩和复制所有 JavaScript （除了第三方库） // 加上 sourcemaps return gulp.src(paths.scripts...) .pipe(sourcemaps.init()) .pipe(coffee()) .pipe(uglify()) .pipe(concat('all.min.js...')) .pipe(sourcemaps.write()) .pipe(gulp.dest('build/js')); }); // 监听文件修改 gulp.task('watch',

1.9K3 0

前端构建系统-《node.js实战》

比如用Babel和uglify构建客户端脚本的命令： { "name": "node-demo-20190626", "version": "1.0.0", "description": "..."build": "npm run babel && npm run uglify" 组合babel和uglify。...touch fulpfile.js //创建fulpfile.js 文件 npm i --save-dev gulp-sourcemaps gulp-babel babel-preset-es2015...const gulp = require('gulp'); // 像加载标准Node模块那样加载Gulp插件 const sourcemap = require('gulp-sourcemaps');...')) }) 以上代码出现了几个用来捕获、处理和写文件的Gulp插件。

2.3K2 0

Django打造大型企业官网（一）一、nvm的安装二、gulp的安装和用法

的安装和用法 1.安装 npm init 生成一个package.json npm install gulp -g 全局 npm install gulp --save-dev 本地...= require("gulp-cssnano") var rename = require("gulp-rename") gulp.task("css",done =>{ gulp.src...= require("gulp-uglify") gulp.task("js",done =>{ gulp.src("....var gulp = require("gulp"); var cssnano = require("gulp-cssnano"); var rename = require("gulp-rename"...); var uglify = require("gulp-uglify"); var concat = require("gulp-concat"); var tinypng_nokey = require

1.2K4 0

Django打造大型企业官网（二）三、项目环境搭建

三、项目环境搭建 3.1.创建项目环境和安装包创建django项目 mkvirtualenv DjangoProject workon DjangoProject pip install -i...": "^1.1.0", "gulp-uglify": "^3.0.2", "gulp-watch": "^5.0.1" } { "name": "xfz_front", "...": "^1.1.0", "gulp-uglify": "^3.0.2", "gulp-watch": "^5.0.1" } } 安装包,自动识别package.json文件中需要的包...= require("gulp-rename"); var uglify = require("gulp-uglify"); var concat = require("gulp-concat");...rename = require("gulp-rename"); var uglify = require("gulp-uglify"); var concat = require("gulp-concat

1.5K3 0

gulp替换webpack

", "gulp-if-else": "^1.0.3", "gulp-less": "3.3.0", "gulp-run-sequence": "^0.3.2", "gulp-sourcemaps...": "^1.9.1", "gulp-uglify": "^2.0.0", "gulp-util": "^3.0.7", "gulp-version-number": "^0.1.5...buffer = require('vinyl-buffer'); const uglify = require('gulp-uglify'); const cleanCSS = require('gulp-clean-css...'); const sourcemaps = require('gulp-sourcemaps'); const htmlmin = require('gulp-htmlmin'); const srcPath...("prepare", ["clean"], function(){ let uglifyFunc = function(){ return uglify({mangle: {except

2.9K4 0

精通gulp常用插件

var rename = require("gulp-rename"); gulp.src('..../hello.txt') .pipe(rename('gb/goodbye.md')) // 直接修改文件名和路径 .pipe(gulp.dest('....var uglify = require("gulp-uglify"); gulp.src('..../dist/')); 工具 gulp-load-plugins 描述：从包的依赖和附件里加载gulp插件到一个对象里给你选择。...PluginsName() .pipe($.uglify()) .pipe($.rename('all.min.js')) .pipe(gulp.dest('.

1.5K2 0

精通gulp常用插件

var rename = require("gulp-rename"); gulp.src('..../hello.txt') .pipe(rename('gb/goodbye.md')) // 直接修改文件名和路径 .pipe(gulp.dest('....var uglify = require("gulp-uglify"); gulp.src('..../dist/')); 工具 gulp-load-plugins 描述：从包的依赖和附件里加载gulp插件到一个对象里给你选择。...PluginsName() .pipe($.uglify()) .pipe($.rename('all.min.js')) .pipe(gulp.dest('.

1.6K9 0

gulp使用教程

这个文件保存项目的相关信息第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...压缩文件插件： npm install gulp-uglify –save-dev 重名名插件： npm install gulp-rename –save-dev 再安装一下npm install...jslint 然后在gulpfile.js文件里面编写gulp任务代码 var gulp = require("gulp"), jshint = require("gulp-jshint"),...uglify = require("gulp-uglify"), rename = require("gulp-rename"); gulp.task("scripts",function...('default')) .pipe(rename({suffix:".min"})) //重命名 .pipe(uglify()) //压缩文件 .pipe

7664 0

使用gulp实现自动刷新浏览器

--save-dev cnpm install gulp-rename --save-dev cnpm install gulp-uglify --save-dev 也可以到本人的码云上下载package.json...('gulp-connect'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); var rename...= require("gulp-rename"); var jsSrc='....pipe(gulp.dest(jsDist)) .pipe(rename({suffix:'.min'})) .pipe(uglify()) .pipe(gulp.dest....pipe(gulp.dest(cssDist)) .pipe(rename({suffix:'.min'})) .pipe(gulp.dest(cssDist

1.6K5 0

前端开发使用工具 gulp

require('gulp-cssnano'); var rename = require('gulp-rename') // 定义一个处理css文件改动的任务 gulp.task('css',function...js压缩 npm install gulp-uglify --save-dev 安装js压缩插件同样的道理新建js文件夹新建index.js 代码是生成斐波那契数组 function getFibonacci...= require('gulp'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify') // 对js请求进行压缩和混淆.../ 2.将js代码压缩混淆 .pipe(uglify()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest('...index.html gulpfile.js代码修改如下 var gulp = require('gulp'); var rename = require('gulp-rename'); // 对html

1.6K1 0

构建工具Gulp-lesson1

src 函数和 dest 函数： gulp 对外暴露的 src 函数和 dest 函数对应就是我们待处理文件的入口和处理完成后文件的出口。...('gulp-babel'); const uglify = require('gulp-uglify'); exports.default = function() { return src('...下面的代码分别生成了一份为混淆的版本和一份已混淆的版本，并且混淆的版本还做了重命名了处理： const { src, dest } = require('gulp'); const babel = require...('gulp-babel'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); exports.default...()) .pipe(rename({ extname: '.min.js' })) .pipe(dest('output/')); } 结语：以上了案例来自 Gulp 文档，流式的构建处理确实别有一番感觉

4841 0

构建工具Gulp-lesson5

Gulp 插件列表：https://gulpjs.com/plugins/ 这一节我们将从下面这一段代码开始增加内容，来看一下 gulp 的一些产能常用插件和使用的方式。...const rename = require("gulp-rename"); 使用固定命名输出：安装管道：rename('main.js')； function build() { return...const uglify = require('gulp-uglify'); function build() { const localTime = new Date().toLocaleTimeString...(); return src("src/*.js") .pipe(uglify()) .pipe(dest("output")); } gulp-sass：将我们编写的 sass 文件编译为浏览器可以正常识别的...css 文件，我们要同时安装 sass 和 gulp-sass 插件。

5952 0

gulp的使用

5.5.0", "gulp-cssnano": "^2.1.3", "gulp-imagemin": "^4.1.0", "gulp-rename": "^2.0.0",..."gulp-sass": "^4.1.0", "gulp-uglify": "^3.0.0", "path": "^0.12.7" } 如图： ?...，大概率是因为没有安装对应全局的插件，或者本地安装的插件和全局安装的版本号不一致如果没有安装对应全局和本地的插件，则使用命令安装(以版本号2.24.4的browser-sync为例) npm install...监听任务依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename...'); var uglify=require('gulp-uglify'); var concat=require('gulp-concat'); var cache=require('gulp-cache

1.6K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭