Merging and compressing JS, CSS files
Compressing the Js,css file requires referencing the following components:
GULP-MINIFY-CSS: Compressing CSS
Gulp-jshint: Check JS
Gulp-uglify: Compression js
Gulp-concat: Merging Files
Gulp-rename: Renaming files
Gulp-clean: Empty Folder
Gulp-notify: Tips
Install the Component project directory, enter the project's root directory via CD, and perform the NPM installation component below
NPM Install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify--save-dev
In gulpfile.js
the above file, write:
//Introduction of Gulp and componentsvar gulp=require (' Gulp '),//Gulp Base Library Minifycss=require (' Gulp-minify-css '),//CSS compression concat=require (' Gulp-concat '),//Merge file Uglify=require (' gulp-uglify '),//JS compression rename=require (' Gulp-rename '),//File Rename Jshint=require (' Gulp-jshint '),//JS Check notify=require (' gulp-notify ');//TipsGulp.task (' Default ',function() {Gulp.start (' minifycss ', ' minifyjs '));});//CSS processing gulp.task (' Minifycss ',function(){Return gulp.src (' Htdocs/kunpeng/static/css/*.css ')//Set CSS. PIPE (concat (' order_query.css '))//Merge CSS files to "Order_query". Pipe (Gulp.dest (' dist/styles '))//Sets the output path. Pipe (rename ({suffix: '. Min '}))//Modify the file name. Pipe (MINIFYCSS ())//Compress files. Pipe (gulp.dest (' dist/styles '))//Output file directory. Pipe (notify ({message: ' CSS task ok '});//Prompt success});//js processing gulp.task (' Minifyjs ', function () {return gulp.src (['/static/js/juicer-min.js ', '/ Static/js/bootstrap.min.js ', '/static/js/bootstrap-datetimepicker.min.js ', '/static/js/order_query.js ']) // Select the merged JS. Pipe (concat (' order_query.js ')) // merge JS. Pipe (Gulp.dest (' Dist/js '))//output. Pipe (rename ({suffix: '. Min ')) // rename. Pipe (Uglify ()) // compress. Pipe (gulp.dest (' Dist/js ') // output. Pipe (notify ({message: "JS task OK"}); // hint});
JS CSS Compression