gulp 压缩css js

前端代码压缩说明
一、找到要压缩的项目并更新最新版本代码
例如：项目地址：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.