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,//省略布尔属性的值 <input checked> ==> <input><br>        removeEmptyAttributes: true,//删除所有空格作属性值 <input id=""> ==> <input><br>        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"<br/>        removeStyleLinkTypeAttributes: true//删除<style>和<link>的type="text/css"<br/>    };<br/>    return gulp.src([&#39;bucketSrc/*/*.html&#39;,&#39;bucketSrc/*.html&#39;])<br/>        .pipe(htmlmin(options))<br/>        .pipe(gulp.dest(&#39;bucketDist&#39;));<br/>});<br/>gulp.task(&#39;minifycss&#39;, function() {<br/>    return gulp.src([&#39;bucketSrc/s/c/*/*.css&#39;,&#39;bucketSrc/s/c/*.css&#39;])      //压缩的文件<br/>        .pipe(minify())<br/>        .pipe(gulp.dest(&#39;bucketDist/s/c&#39;)) ; //输出文件夹<br/>});<br/>gulp.task(&#39;minifyjs&#39;,function(){<br/>    return gulp.src(&#39;bucketSrc/s/j/*/*.js&#39;)<br/>        .pipe(uglify())<br/>        .pipe(gulp.dest(&#39;bucketDist/s/j&#39;))<br/>});<br/>gulp.task(&#39;clean&#39;, function(cb) {<br/>    del([&#39;bucketDist/*/*.html&#39;,&#39;bucketDist/*.html&#39;,&#39;bucketDist/s/img/*.*&#39;,&#39;bucketDist/s/c/*/*.css&#39;,&#39;bucketDist/s/c/*.css&#39;,&#39;bucketDist/s/j/*/*.js&#39;], cb)<br/>});<br/>gulp.task(&#39;images&#39;, function() {<br/>    return gulp.src(&#39;bucketSrc/s/img/*.*&#39;)<br/>        .pipe(imagemin({<br/>            progressive: false<br/>        }))<br/>        .pipe(gulp.dest(&#39;bucketDist/s/img&#39;));<br/>});<br/>gulp.task(&#39;default&#39;, [&#39;clean&#39;, &#39;testHtmlmin&#39;, &#39;minifycss&#39;,&#39;images&#39;,&#39;minifyjs&#39;]);<br/>4，命令行中运行gulp </script></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!