gulp压缩文件

压缩文件的步骤

• 创建项目源码的目录结构
  • npm init 生成项目的配置文件
  • 创建项目结构（项目中所需要的的文件夹）
  • 安装gulp依赖，npm install --save-dev gulp
  • 创建一个gulp的配置文件gulpfile.js

创建压缩任务

• 把gulp模块引入 gulpfile.js文件中
• 声明一个函数压缩任务的函数： function css(){}，并且这个函数中必须有return
• 在这个函数中写任务：
  • 1.gulp.src(需要压缩的css文件地址)
    • gulp.src(’./src/css/index.css’) 这样就表示值压缩css下index.css 这个文件，但是我们压缩的是不可能值压缩一个
    • gulp.src(’./src/css/**’) 找到css这个文件夹中所有的文件进行压缩
  • 2.找到这些文件之后，就进行压缩
    • gulp.pipe() 这个方法就是帮我们做事情的，你可以在中这个括号中写正则把空格去掉，但是这样比较麻烦，已经有别人写好了这个插件（gulp-cssmin），我们直接下载就可以了
      • gulp-cssmin这个包的功能就是专门压缩css文件的
      • 下载css-min：npm install -D gulp-cssmin
      • 导入css-min
      • pipe(cssmin()) 执行css-min，其实就是在执行压缩css
  • 3.把压缩的文件放到指定的文件夹中 gulp.dest(‘你要放到哪里’)
    + pipe(gulp.dest(‘文件路径’))
    + gulp.dest() 是一个方法，需要用pipe() 来执行

      function css() {
          return gulp
              .src('./src/css/**')
              .pipe(cssmin())
              .pipe(gulp.dest('./dist/css'))
      }
  

  • 4.最后，必须使用exports把这格函数导出，才能使用
    • exports.css = css;
  • 5.在命令行输入 gulp css 回车就可以看到压缩的结果

文件所需要的的第三方模块

• 压缩css:
  • npm install -D gulp-cssmin
• 压缩js:
  • npm install -D gulp-babel@7.0.1 (一定要安装这个指定版本)
  • npm install -D babel-core（不需要引入）
  • npm install -D babel-preset-env（不需要引入）
  • npm install -D gulp-uglify
• 压缩HTML:
  • npm install -D gulp-htmlmin
• 清除缓存：
  • npm install -D gulp-clean

创建压缩js代码

• 压缩js代码，必须先把ES6的代码转化为es5才能压缩 babel就是转化的

    function js() {
        return gulp
            .src('./src/js/**')
            .pipe(babel({
                 presets: ["env"]
            }))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'))
    }

创建一个压缩HTML的代码

• 压缩HTML的时候必须传递一个参数，为对象

    {
        collapseWhitespace: true, // 表示去除空格
        removeEmptyAttributes: true, // 移出空的属性
        minifyCSS: true, // 压缩 style 标签
        minifyJS: true, // 压缩 script 标签
    }

清除缓存，也就是在压缩之前可以把缓存清除

    function clean() {
        return gulp
            .src(['./dist/**'])
            .pipe(gulpclean())
    }

创建一个多任务执行的任务

• series()按顺序依次执行
• parallel()中的任务同时执行

    let all = gulp.series(clean, gulp.parallel(css, js, html, data, lib, static));

• 在命令行 gulp all 就相当于执行这个两个方法中的所有任务

创建一个压缩完之后打开浏览器的服务

• 需要下载 gulp-webserver模块，
  • npm install -D gulp-webserver
  • 导入模块
  • webserver 需要传递一个参数，参数为对象

      function webserver() {
          return gulp
              .src('./dist')
              .pipe(webservers({
                  host: 'localhost', // 域名
                  port: 3000, // 监听的端口号，统一写 3000
                  open: './html/index.html', // 打开的页面，相对于 dist 文件夹来的目录
                  livereload: true, // 浏览器自动刷新
              }))
      }
  

创建第一个实时监听的任务

• 需要用到gulp.watch()

    function watchs() {
        gulp.watch('./src/css', css);
        gulp.watch('./src/js', js);
        gulp.watch('./src/html', html);
        gulp.watch('./src/data', data);
        gulp.watch('./src/static', static);
    }

总结：

// 引入gulp 模块
const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const gulpclean = require('gulp-clean');
const webserver = require('gulp-webserver');

/* 
    +   如果这里报一个错误：“Cannot read property 'apply' of undefined”
            +   这是node v12 和 gulp v4版本以上的一个注意点，需要全局安装 gulp-cli: `npm i -g gulp-cli`

*/

// 创建一个 压缩css任务
// gulp.src('你要压缩的文件的路径')
// gulp.pipe(去掉空格的任务) 
// .pipe(gulp.dest('./dist/css')) 把压缩号的文件放入 dist/css文件中
// 也需要一个第三方模块 gulp-cssmin 
// 需要下载 gulp-cssmin

function css(){
    return gulp
        //  src/css/**   表示压缩css下面的所有文件 
        .src('./src/css/**')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
}

// 创建一个压缩js的任务
/* 
    浏览器只识别 es5，如果代码中有es6 和 es7的代码需要把 这些代码转化为es5在进行压缩
*/
function js(){
    return gulp
        .src('./src/js/**')
        .pipe(babel({
            presets: ["env"]
       }))
       .pipe(uglify())
       .pipe(gulp.dest('./dist/js'))
}


// 压缩HTML任务
function html(){
    return gulp 
        .src('./src/html/**')
        .pipe(htmlmin(
            {
                collapseWhitespace: true, // 表示去除空格
                removeEmptyAttributes: true, // 移出空的属性
                minifyCSS: true, // 压缩 style 标签
                minifyJS: true, // 压缩 script 标签
            }
        ))
        .pipe(gulp.dest('./dist/html'))
}

// 创建一个任务把静态资源股复制到dist文件夹中
function data(){
    return gulp
        .src('./src/data/**')
        .pipe(gulp.dest('./dist/data'))
}

function static(){
    return gulp
        .src('./src/static/**')
        .pipe(gulp.dest('./dist/static'))
}

// 创建一个清楚缓存的任务
function clean(){
    return gulp 
        .src(['./dist'])
        .pipe(gulpclean());
}


// 创建一个打开服务器的任务
function server(){
    return gulp
        .src('./dist')
        .pipe(webserver({
            host:'localhost',
            port:3000,
            open:'./html/index.html',
            livereload: true,
        }))
}

function watchs() {
    gulp.watch('./src/css', css);
    gulp.watch('./src/js', js);
    gulp.watch('./src/html', html);
    gulp.watch('./src/data', data);
    gulp.watch('./src/static', static);
}

// 把任务导出
exports.css = css;
exports.js = js;
exports.html = html;
exports.data = data;
exports.static = static;
exports.clean = clean;
exports.server = server;
exports.watchs = watchs;

// 创建一个总任务 去执行所有的分任务
// 执行其他压缩或者复制之前，应该先清除缓存
// exports.build = gulp.series(clean,css,js,html,data,static);
exports.build = gulp.series(clean,gulp.parallel(css,js,html,data,static),server,watchs);