压缩工具gulp的使用

1、代码的压缩gulp 的一些方法

（1）安装node地址http://nodejs.cn/. gulp首先是基于node的一款压缩工具，所以在使用前需要安装node环境。可以使用node -v查看是否安装成功.

（2）全局安装gulp使用命令npm install gulp -g,使用命令gulp -v来检查有没有安装好.

（3）使用命令npm install gulp吧gulp安装在需要压缩的目录。( 把gulp模块下载下来 在文件里引用使用 )

（4）新建一个名字叫做gulpfile.js的文件(名字必须是这个)，在里面进行压缩代码.

• 具体压缩代码如下

// gulp作用 压缩css js html
// 在命令行里下载好的模块 引入的时候直接写模块的名字
  // 主模块
var gulp = require("gulp");
// 用来压缩js文件的模块，需要在命令行中进行安装
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var minifyCss = require("gulp-minify-css");
var minifyHtml = require("gulp-minify-html");

// 创建任务
// 1. 任务的名称
// 2. 具体执行什么操作
gulp.task("js", function (){
    // 1.找到想要压缩的文件
  //gulp.src("xxx.js").pipe();
  gulp.src("./*.js")
  // .pipe 下一步 uglify()压缩js
    .pipe(uglify())
      // 合并
    .pipe(concat("all.js"))//需要多文件压缩时使用
      // gulp.dest()处理好的文件输出到哪里
    .pipe(gulp.dest("./dest"))
});
//压缩css
gulp.task("css", function (){
  gulp.src("./*.css").pipe(minifyCss())
  .pipe(concat("all.css")).pipe(gulp.dest("./dest"))
});
//压缩HTML
gulp.task("html", function (){
   gulp.src("./index.html").pipe(minifyHtml()).pipe(gulp.dest("./dest"))
});

// 执行任务   参数2 任务名称  (这里是在命令行里执行gulp的时候只执行一次)
gulp.task("default",["js","css","html"]);//default  默认执行
// 实时压缩 (只要文件改变就会执行一次)
// 1. 监听什么文件 2. 执行什么任务
gulp.watch("./*.js",["js"]);
gulp.watch("./*.css",["css"]);
gulp.watch("./*.html",["html"]);//最好不要一起压缩