码迷,mamicode.com
首页 > 其他好文 > 详细

gulp 项目构建 代码压缩与混淆

时间:2019-09-23 15:09:49      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:pfile   numbers   number   min()   压缩文件   压缩   代码   启动   pip   

1、gulp安装

需要全局安装:npm install gulp -g

还需要本地安装,在项目目录中:npm install gulp --save

2、gulp使用

  • 在项目目录中新建1个gulpfile.js文件.

  • 在这个文件中写上构建代码.

gulp-uglify 压缩js

压缩混淆js代码,需要gulp-uglify插件支持.使用npm安装该插件  npm install gulp-uglify

// 获取 gulp
var gulp = require(‘gulp‘);
// 获取 uglify 模块(用于压缩 JS)
var uglify = require(‘gulp-uglify‘);
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task(‘jscompress‘, function() {
    // 1. 找到文件
   return gulp.src(‘js/cart.js‘)
    // 2. 压缩文件
        .pipe(uglify({
				mangle:true
			}))
        // 3. 另存压缩后的文件
        .pipe(gulp.dest(‘dist/js‘));
});

  

压缩CSS 

需要gulp-cssmin插件支持.使用npm安装该插件  npm install gulp-cssmin

var cssmin = require("gulp-cssmin");

gulp.task("csscompress",function () {

	//1.这个任务是用来压缩css的.
	
	//  那么首先你需要指定需要压缩的css文件
	
	//  调用gulp对象的src方法,指定要处理的文件的路径.
	
	gulp.src("css/ershou.css")
	
	.pipe(cssmin())
	
	.pipe(gulp.dest("dist/css"));
	
	//2.pipe()管道理解 阀门形象理解.
	
	//3.管道中每一个阀门做不同的事情.不同的事情需要插件来完成.
	
	//  压缩css的插件. gulp-cssmin
	
	//  安装插件,引入gulp-cssmin
	
	//  引入后,其实1个函数.
	
	//  将其在管道中调用,相当于在管道中设置了1个阀门.
	
	//4.管道最后1关,要调用gulp对象的dest方法,设置存放处理后的路径.

});

 

执行命令:

gulp csscompress

gulp jscompress

  

 

gulp 项目构建 代码压缩与混淆

标签:pfile   numbers   number   min()   压缩文件   压缩   代码   启动   pip   

原文地址:https://www.cnblogs.com/winstonsias/p/11572285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!