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