Gulp代码压缩

想要用gulp实现代码压缩必须运用以下几点：

　　1.首先，引入依赖（gulp）

　　　　　　var gulp= require（“gulp”）

 

　　2.其次在引入你所需要压缩的（js、css、img、html）的插件，

　　　　　　var uglify = require('gulp-uglify');            ----- //压缩JS
　　　　　　var cssmin = require('gulp-cssmin');        -----//压缩CSS
　　　　　　var imagemin = require('gulp-imagemin'); ----- //压缩图片
　　　　　　var htmlmin = require('gulp-htmlmin'); 　 -----//压缩html

　　　　　　var rename = require('gulp-rename'); 　　-----//重命名

 

　　3.之后，在命令框里下载gulp全局：npm install gulp --save -dev

　　　　　　下载成功之后，在下载一个局部的gulp：npm install gulp

 

　　4.当完成以上两点之后呢，在继续接下来的内容：

　　　   先来完成任务配置：　　　　　　　

//压缩js
    gulp.task('uglify',function(){

           gulp.src('js/js.js')  --要压缩文件的路径
           .pipe(uglify())
           .pipe(rename("js.min.js"))  --压缩之后的文件名
           .pipe(gulp.dest('dest/js'));  --压缩之后文件所在的位置
       });

//压缩css
gulp.task('cssmin', function() {
    gulp.src('css/css.css')  --要压缩文件的路径
        .pipe(cssmin())
        .pipe(rename("css.min.css"))　　--压缩之后的文件名
        .pipe(gulp.dest('dest/mincss'))  --压缩之后文件所在的位置
    //        {compatibility: 'ie8'}  兼容ie8
});

//压缩img
gulp.task('imagemin', function() {
    gulp.src('img/1.{jpg,png,gif}')　　--要压缩文件的格式
        .pipe(imagemin())
        .pipe(gulp.dest("dest/minimg"));　　--压缩之后文件所在的位置
});

//压缩html
gulp.task('htmlmin', function() {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        minfyJS: true, //压缩JS
        minfyCss: true, //压缩CSS
    };

    gulp.src('index.html')
        .pipe(htmlmin(options))
        //压缩后的名字
        .pipe(rename('index.min.html'))
        .pipe(gulp.dest('dest/htmlmin'))  --压缩后文件的位置
});

//注册默认任务
gulp.task('default', ['uglify','cssmin',"imagemin","htmlmin"]);

 

   进行压缩后的代码在一个文件夹名为dest的文件夹里，里面的有你压缩的js  css  img  html 的代码。

 

以上的我发表的内容，希望对各位有所帮助！　　　　　　

 

转载于:https://www.cnblogs.com/zy17600095897/p/7086024.html