gulp compression css js

Front-end code compression explain 
a finding to be compressed project and update the latest version of the code 
example: Project Address: F: *** 
  
Second, the project needs to be compressed path to install the following plug-in (provided that npm installed) 
such as: Front desired compression file address: 
F: *** 
to be installed in the current path following plug
 1 .gulp command 
command: npm install GULP
 2 file merge. 
command: npm install GULP - concat
 3 .js file compression 
command: npm install GULP - uglify
 4 .css file compression 
command: npm install gulp -minify- CSS
 5 Image compression plug-in (if not related to the picture compression not installed). 
command: npm install gulp - imagemin
 6 .gulp tool library 
command: npm install gulp - util 
Third, after installing the plug-in project directory
i.node_modules folder: Library files are stored for the installation of
ii.package - lock.json default on the line, without modifying 
four js file manually create a 
file name: gulpfile.js (You must use this name) 
path: directory and install the plug-in is the same as 
five or edit gulpfile.js 
// a reference library of commands 
var GP = the require ( 'GULP' );
 // reference library combined 
var the concat = the require ( 'GULP-the concat' );
 // reference css compression library 
var cssUglify the require = ( 'GULP-Minify-css' );
 // reference js compression library 
var uglify the require = ( 'GULP-uglify' );
 // reference library tools, mainly for viewing the error message 
var gutil the require = ( 'GULP-util' ); 
gp.task ( "coinbig" , function //() {
 Edit compressed files }); 
Coinbig name for the task, for example, compression: gulp coinbig, need to perform the task by the task name 
command to edit executed . 1 .css 
e.g. project use: 
        $ {getCss ( "HomePress", "the Common "," on Bootstrap "," Home " )} 
        corresponding to path 
        HomePress: / CSS / homepress.css 
        the Common: /css/comm/common.css 
        on Bootstrap: /css/comm/Bootstrap.css 
        Home: / CSS / Home / Home. css         compression command (method of writing gulpfile.js):                          
gp.src ([ 'corresponding to the Common path' ,
         'corresponding path on Bootstrap' ,
         'Home corresponding path' 
    ]) pipe (the concat (.



        'HomePress final filename')) pipe (cssUglify () ) pipe (gp.dest ( ' path required to compress'../ JS / Module1 / Home / home.js 
compression command (method of writing gulpfile.js):        )); 
Actual coding should be such, for reference 
gp.src ([
         '/css/comm/common.css' ,
         '/css/comm/Bootstrap.css' ,
         '/css/Home/Home.css' 
    ]) pipe (the concat (. 'homepress.css')) pipe (cssUglify ()) pipe (gp.dest ( '/ CSS'.. ));
 2 .js 
e.g. project use: 
            $ {getJs ( "HomePress "," Jquery "," Vue "," Home " )} 
            corresponding to path 
        HomePress: /js/press/homepress.js 
        Jquery: /js/comm/jquery.js 
        Vue: /js/comm/vue.js 
        Home: / JS / Module1 / Home / 
gp.src ([
                            'Jquery corresponding path' ,
         'Vue corresponding path ' ,
         ' Home corresponding path '
        ]). pipe (concat (HomePress final file name)). pipe (uglify ()). 
        ON ( 'error', function (ERR) { 
        gutil.log (gutil.colors.red ( '[Error]' ), 
        err.toString ());.}) pipe (gp.dest ( 'path required to compress' )); 
actual coding should be such, for reference 
gp.src ([
                            ' /js/comm/jquery.js ' ,
         ' /js/comm/vue.js' ,
         '/js/module/home/home.js' 
        ]). pipe (the concat (homepress.js)). pipe (uglify ()). 
        ON ( ' error ' , function  (err) {
        gutil.log (gutil.colors.red ( '[Error]' ), 
        err.toString ());.}) pipe (gp.dest ( '/js/press/'));
 
six, a command to perform encoding after the completion of
 1 . run cmd
 2 into the compression directory path (must enter the folder where the file gulpfile.js).
 3 run gulp [job name] as:. gulp coinbig.