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

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

  

 

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

时间: 2024-10-09 15:14:29

gulp 项目构建 代码压缩与混淆的相关文章

使用gulp进行代码压缩

gulp是一个很不错前端自动化工具,可以帮我们完成一些重复性操作,比如html.css和js代码的压缩.合并.混淆等,虽然这些操作可以通过一些在线工具帮我们实现,但不断重复地复制粘贴肯定比不上一句命令来得方便,所以编写gulp任务可以大大提高程序员的开发效率. 因为gulp依赖于node环境,所以想使用gulp必须先安装好node.另外gulp本身是一个轻量化内核,自身拥有的api不多,所以很多功能需要依赖插件完成.关于html.css和js代码压缩的插件有三个,分别是gulp-htmlmin.

gulp进阶构建项目由浅入深

阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp.task(name[,deps],fn); gulp.watch(glob[,opts],tasks) gulp一些常用插件 gulp-rename(重命名) gulp-uglify(JS压缩) gulp-minify-css(css文件压缩) gulp-minify-html(html压缩) gulp-concat(JS文件合

gulp + webpack 构建多页面前端项目

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢

Android 项目的代码混淆,Android proguard 使用说明

简单介绍 Java代码是非常easy反编译的. 为了非常好的保护Java源码,我们往往会对编译好的class文件进行混淆处理. ProGuard是一个混淆代码的开源项目.它的主要作用就是混淆,当然它还能对字节码进行缩减体积.优化等,但那些对于我们来说都算是次要的功能. 官网地址:http://proguard.sourceforge.net/ 原理 Java 是一种跨平台的.解释型语言,Java 源码编译成中间"字节码"存储于 class 文件里.因为跨平台的须要,Java 字节码中包

gulp+webpack构建前端项目

本文将介绍如何利用gulp+webpack构建一个基本的前端项目.假设你已经安装了node环境并且会使用简单的命令行 1.gulp安装 (1)全局安装 npm install gulp -g (2)查看gulp是否安装成功 gulp -v (3)进入本地目录,新建gulpfile.js 2.安装gulp-webpack插件 基于gulp的插件非常多,建议大家查看npm官网https://www.npmjs.com (1)安装 webpack的用途主要是模块化+打包.安装敲入命令 npm inst

gulp静态资源构建、压缩、版本号添加

公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方案是添加 urlArgs 构建时用shell脚本替换 'ttversion'为一个随机数值,我用的是当前时间. 问题2.其他模块引用的是common,那common.js不变的话,缓存会一直存在. 解决方案:还是用shell脚本,首先更改common.js为common_随机数.js,再更改所有引用

JAVAEE——BOS物流项目02:学习计划、动态添加选项卡、ztree、项目底层代码构建

1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree(重点) 3.数据库建模工具PowerDesigner使用方式 4.myeclipse翻转引擎插件使用(了解) 5.项目底层代码构建(重点) n 持久层代码抽取 n 表现层代码抽取 6.实现BOS项目登录和注销功能 2 jQuery easyUI中动态添加选项卡 l 用于动态添加一个选项卡 l 选中指

前端项目构建yeoman (yo+gulp+bower)

需要安转的工具: nodejs  npm cnpm gulp bower yo git 1.gulp是基于nodejs,需要安装nodejs 2.npm 是包管理器,用来下载其他工具包插件的 安装教程: http://blog.csdn.net/cjagkp/article/details/52160823 3.cnpm是国内npm的淘宝镜像,因为国内有墙,所以下载一些工具包要FQ而且速度慢,用cnpm会很快例如 下载 gulp-sass(后面要下载).安装好npm后,命令行执行下面:  npm

使用gulp+Browserify构建React应用

<一>.使用gulp构建React应用 一.React项目结构 .gulpfile.js ./src .index.html /js .App.js .Child.js .Parent.js 二.代码 index.html 和 js目录下的三个jsx文件如下 //index.html <!DOCTYPE html> <html> <head></head> <body> <div id="app">&l