gulp 前端自动构建工具_gulp mangle: { toplevel: true }-优快云博客

本文链接：https://blog.youkuaiyun.com/seven_an/article/details/78855422

本文介绍如何使用Gulp搭建前端自动化构建流程，包括安装配置、常用插件介绍及具体任务如压缩HTML、JS、CSS代码的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

中文官网地址：http://www.gulpjs.com.cn

安装：

前提是安装了nodejs，步骤可见：点击打开链接
全局安装：npm install gulp -g
在项目中安装: npm install gulp --save-dev
检测是否安装成功： gulp -v

配置：

现在自己的项目根目录下新建文件：gulpfile.js,固定名称。

在文件中引入gulp模块， var gulp = require("gulp")

安装项目需要的插件：

npm install gulp-minify-css --save-dev

部分配置代码如下：

var outputDir       = 'newactivity';
var outputJSDir     = outputDir + '/js';
var outputCSSDir    = outputDir + '/css';
var outputHTMLDir    = outputDir + '/html';


var gulp = require('gulp');

var pump = require('pump');
var minify = require('gulp-minify');
var htmlmin = require('gulp-htmlmin');
var cleancss = require('gulp-clean-css');
var UglifyJS = require('gulp-uglify');

//1、压缩html目录下的代码
gulp.task('compress-html',function(){
	gulp.src('*.html')
		.pipe(htmlmin({collapseWhitespace: true}))
		.pipe(gulp.dest(outputDir))
})

//2、压缩js目录下的js文件
gulp.task('compress-js', function (cb){
	var option = {
		mangle:{
			toplevel:true,
			keep_fnames:true,
			reserved:['$','http'],
		}
	};
	pump([
	  	gulp.src('js/*.js'),
	    	UglifyJS(option),
	    	gulp.dest(outputJSDir)
		],
		cb
	);
});

//3、压缩css文件
gulp.task('compress-css', function(){
	gulp.src('css/**/*.css')
		.pipe(cleancss({compatibility: 'ie8',keepSpecialComments:'*',sourceMap: true,relativeTo:'css/'})) //保留ie以下的兼容写法
		.pipe(gulp.dest(outputCSSDir))
})

//4、复制文件
gulp.task('copy-files', function(){
	gulp.src("image/**").pipe(gulp.dest(outputDir+'/image'))
})

gulp.task("default",['copy-files','compress-html','compress-js','compress-css'])

注意：

混淆js的时候会改变变量名称，如果你有跨文件使用的变量的话，使用reserved定义好不好被混淆的变量名即可。