Examples of compression using gulp

1, download and install node

visit , then click the big green install button, run the program directly after the download is completed, and you are all ready Ready. npm will be installed together with the installation package,

2, open the code line

<span class="hljs-attribute">node -v //View node version, if the version number is displayed, the installation is successful. </span>

##npm -v //<span class="hljs-attribute"></span>Check the npm version. If the version number is displayed, the installation is successful. .

Locate your own project file, for example: cd /Users/ydz/WebstormProjects/bucketMaster

sudo npm install -g gulp // Download and install gulp<span class="hljs-attribute"></span>

##gulp -v //<span class="hljs-attribute"></span>Check the gulp version. If the version number is displayed, the installation is successful.

#npm init //Create a local warehouse and generate a package.json file for configuration

npm install save-dev gulp //Install gulp to the project local<span class="hljs-keyword"><span class="hljs-keyword"></span></span>

##npm install gulp-htmlmin //Install compressed html plug-in<span class="hljs-keyword"> </span>

##npm install gulp-uglify　//Install compressed js plug-in<span class="hljs-keyword"></span>

##npm install gulp-minify-css //Install compressed css plug-in <span class="hljs-keyword"></span>

##npm install gulp-imagemin　//Install the compressed image plug-in<span class="hljs-keyword"></span>

npm install del//Install the compression cleaning plug-in<span class="hljs-keyword"></span>

#3, create a new gulpfile.js file ##Write in it: <span class="hljs-keyword"></span>

##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,//清除HTML注释

<em><em><em><em><em><em><em><em><span style="font-family: 宋体; font-size: 15px"><em>        collapseWhitespace: true,//压缩HTML<br>        collapseBooleanAttributes: true,//省略布尔属性的值 618a513d64dc731524b226851e903854 ==> 73a3ca28445b1c625f2086a50cb8c7df<br>        removeEmptyAttributes: true,//删除所有空格作属性值 c6f04000d9d1c57edc5e7037b92c9cf1 ==> 73a3ca28445b1c625f2086a50cb8c7df<br>        removeScriptTypeAttributes: true,//删除3f1c4e4b6b16bbbd69b2ee476dc4f83a的type="text/javascript"<br>        removeStyleLinkTypeAttributes: true//删除c9ccee2e6ea535a969eb3f532ad9fe89和2cdf5bf648cf2f33323966d7f58a7f3f的type="text/css"<br>    };<br>    return gulp.src(['bucketSrc/*/*.html','bucketSrc/*.html'])<br>        .pipe(htmlmin(options))<br>        .pipe(gulp.dest('bucketDist'));<br>});<br>gulp.task('minifycss', function() {<br>    return gulp.src(['bucketSrc/s/c/*/*.css','bucketSrc/s/c/*.css'])      //压缩的文件<br>        .pipe(minify())<br>        .pipe(gulp.dest('bucketDist/s/c')) ; //输出文件夹<br>});<br>gulp.task('minifyjs',function(){<br>    return gulp.src('bucketSrc/s/j/*/*.js')<br>        .pipe(uglify())<br>        .pipe(gulp.dest('bucketDist/s/j'))<br>});<br>gulp.task('clean', function(cb) {<br>    del(['bucketDist/*/*.html','bucketDist/*.html','bucketDist/s/img/*.*','bucketDist/s/c/*/*.css','bucketDist/s/c/*.css','bucketDist/s/j/*/*.js'], cb)<br>});<br>gulp.task('images', function() {<br>    return gulp.src('bucketSrc/s/img/*.*')<br>        .pipe(imagemin({<br>            progressive: false<br>        }))<br>        .pipe(gulp.dest('bucketDist/s/img'));<br>});<br>gulp.task('default', ['clean', 'testHtmlmin', 'minifycss','images','minifyjs']);<br>4，命令行中运行gulp </em><em style="line-height: 1.5"><em>default</em></em></span></em></em></em></em></em></em></em></em>

 <br/>

 <br/>

 <br/>

The above is the detailed content of Examples of compression using gulp. For more information, please follow other related articles on the PHP Chinese website!