Use gulp to compress html, js, css, and images of the project,

Use gulp to compress html, js, css, and images of the project,
1, download and install node access http://nodejs.org, and then click the big greeninstallClick to directly run the program after the download is complete, and everything is ready. Npm will be installed along with the installation package. 2. Open the code line.Node-v // view the node version. if the version is displayed, the installation is successful.npm -v 　 //Check the npm version. if the version number is displayed, the installation is successful.Locate your project file, for example:Cd/Users/ydz/WebstormProjects/bucketMasterSudo npm install-g gulp // download and install gulpgulp -v //Check the gulp version. if the version number is displayed, the installation is successful.Npm init // create a local repository and generate the package. json file for configurationNpm install save-dev gulp // install gulp locally to the Projectnpm install Gulp-htmlmin // install the compressed html plug-innpm install Gulp-uglify// Install the compressed js plug-innpm install Gulp-minify-css // install the compressed css plug-innpm install Gulp-imagemin // install the compressed image pluginnpm install Del// Install the compression purge plug-in3. Create a New gulpfile. js file.Write in:Var gulp = require ('gulp '),Htmlmin = require ('Gulp-htmlmin '),Minify = require ('Gulp-minify-css '),Uglify = require ('Gulp-uglify '),Imagemin = require ('Gulp-imagemin '),Del = require ('del ');Gulp. task ('testhtmlmin', function (){Var options = {RemoveComments: true, // clear HTML comments

CollapseWhitespace: true, // compress HTML
CollapseBooleanAttributes: true, // The Boolean attribute value is omitted <input checked = "true"/>=> <input/>
RemoveEmptyAttributes: true, // delete all spaces as attribute values <input id = ""/>=> <input/>
RemoveScriptTypeAttributes: true, // Delete <script> type = "text/javascript"
RemoveStyleLinkTypeAttributes: true // Delete <style> and <link> type = "text/css"
};
Return gulp. src (['bucketsrc/*. html ', 'bucketsrc/*. html'])
. Pipe (htmlmin (options ))
. Pipe (gulp. dest ('bucketdist '));
});
Gulp. task ('ifycss ', function (){
Return gulp. src (['bucketsrc/s/c/*. css ', 'bucketsrc/s/c/*. css']) // compressed file
. Pipe (minify ())
. Pipe (gulp. dest ('bucketdist/s/C'); // Output Folder
});
Gulp. task ('ifyjs', function (){
Return gulp. src ('bucketsrc/s/j/*. js ')
. Pipe (uglify ())
. Pipe (gulp. dest ('bucketdist/s/J '))
});
Gulp. task ('clean', function (cb ){
Del (['bucketdist /*/*. html ', 'bucketdist /*. html ', 'bucketdist/s/img /*. * ', 'bucketdist/s/c /*/*. css ', 'bucketdist/s/c /*. css ', 'bucketdist/s/j /*/*. js'], cb)
});
Gulp. task ('images', function (){
Return gulp. src ('bucketsrc/s/img /*.*')
. Pipe (imagemin ({
Progressive: false
}))
. Pipe (gulp. dest ('bucketdist/s/img '));
});
Gulp. task ('default', ['clean', 'testhtmlmin', 'minifycss ', 'images', 'minifyjs']);
4. Run gulp in the command line.Default