前端代码压缩说明 一、找到要压缩的项目并更新最新版本代码 例如:项目地址:F:*** 二、在需要压缩的项目路径安装以下插件(前提是安装过npm) 例如:前端所需压缩文件地址: F:*** 需在当前路径下安装以下插件 1.gulp命令 命令执行:npm install gulp 2.文件合并 命令执行:npm install gulp-concat 3.Js文件压缩 命令执行:npm install gulp-uglify 4.css文件压缩 命令执行:npm install gulp-minify-css 5.图片压缩插件(如果不涉及到图片压缩可不安装) 命令执行:npm install gulp-imagemin 6.gulp 工具库 命令执行:npm install gulp-util 三、安装好插件后项目目录 i.node_modules文件夹:用于存放安装的库文件 ii.package-lock.json 使用默认的就行,无需修改 四、手动创建一个js文件 文件名:gulpfile.js(必须使用这个名字) 路径:和安装好插件的目录相同 五、编辑gulpfile.js //引用命令库 var gp = require('gulp'); //引用合并库 var concat = require('gulp-concat'); //引用css压缩库 var cssUglify = require('gulp-minify-css'); //引用js压缩库 var uglify = require('gulp-uglify'); //引用工具类库,主要用于查看错误信息 var gutil = require('gulp-util'); gp.task("coinbig",function(){ //编辑压缩文件 }); Coinbig 为压缩的任务名称 例如:gulp coinbig,需要通过任务名执行任务 编辑需要执行的命令 1.Css 例如项目中使用方式: ${getCss("HomePress","Common","Bootstrap","Home")} 对应路径 HomePress:/css/homepress.css Common:/css/comm/common.css Bootstrap:/css/comm/Bootstrap.css Home:/css/Home/Home.css 压缩命令(写入gulpfile.js的方法中): gp.src([ 'Common对应路径', 'Bootstrap 对应路径', 'Home 对应路径' ]).pipe(concat('HomePress 的最终文件名')).pipe(cssUglify()).pipe(gp.dest('需要压缩到的路径')); 实际编码应该是这种,仅供参考 gp.src([ '/css/comm/common.css', '/css/comm/Bootstrap.css', '/css/Home/Home.css' ]).pipe(concat('homepress.css')).pipe(cssUglify()).pipe(gp.dest('/css')); 2.Js 例如项目中使用方式: ${getJs("HomePress","Jquery","Vue","Home")} 对应路径 HomePress:/js/press/homepress.js Jquery:/js/comm/jquery.js Vue:/js/comm/vue.js Home:/js/module/home/home.js 压缩命令(写入gulpfile.js的方法中): gp.src([ 'Jquery 对应路径', 'Vue 对应路径', 'Home 对应路径' ]).pipe(concat(HomePress 的最终文件名)).pipe(uglify()). on('error',function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString());}).pipe(gp.dest('需要压缩到的路径')); 实际编码应该是这种,仅供参考 gp.src([ '/js/comm/jquery.js', '/js/comm/vue.js', '/js/module/home/home.js' ]).pipe(concat(homepress.js)).pipe(uglify()). on('error',function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString());}).pipe(gp.dest('/js/press/')); 六、编码完成之后进行命令执行 1.运行cmd 2.进入压缩目录路径(必须进入gulpfile.js所在文件夹) 3.执行命令 gulp [任务名] 如:gulp coinbig.