文件压缩:gulp的吃法

文件压缩

  • 上传服务器时,文件总是要压缩一下,显得比较专业;(就是把没用的空格咔嚓掉),
    当然人工删除是不可能;
  • 而gulp就是一个很好的压缩工具(能压css,html,js,图片);当然它还有其他功能;可以看下官方文档

安装,

首先当然得要node.js,然后

npm installl gulp

然后随便安装它的命令性工具

npm install gulp-cli -g

基本使用

  1. .建立gulpfile.js;里面记得require(‘gulp’);

  2. .重构文件夹结构,也就是添加src和dist文件夹;(这两个新文件夹名字随便取,)

  3. scr文件夹用来放要压缩的文件,dist放压缩后的文件;

  4. 然后:介绍一下命令::
    gulp.src():获取任务要处理的文件;
    gulp.dest():输出文件;
    gulp.task():建立gulp任务;
    gulp,watch():监控;
    (gulp的功能都是通过插件来实现的,命令太少导致功能有限);

  5. 先说一下怎么复制(就是把src里的文件复制到dist),gulpfile.js的内容如下:

const gulp = require('gulp');
gulp.task('demo', () => {
    console.log('win');
    gulp.src('./src/new-index/index.css')
        .pipe(gulp.dest('./dist/css'));
})

然后命令栏输入:gulp demo(这里的demo就是你js里task的第一个参数);
报了个小错们,无关紧要,复制还是成功.好像说什么没用异步,当然我不能忍受错误;
在这里插入图片描述
解决办法加个参数就行了;(其实就是为了好看,这个报错不影响复制)

const gulp = require('gulp');
gulp.task('demo', (a) => {
    console.log('win');
    gulp.src('./src/new-index/index.css')
        .pipe(gulp.dest('./dist/css'));
        a();
})

我说过gulp的功能都靠插件,它自己功能不够;

gulp插件

  • gulp-htmlmin:html文件压缩;
  • gulp-csso::css压缩;
  • gulp-babel:js语法转化(比如把es6转为es5解决兼容问题);
  • gulp-less:
  • gulp-uglify:
  • gulp-file-include:
  • browsersync:浏览器实现同步;
  • 当然还有很多,插件使用比较简单下载,引用,调用,就ok了

插件的使用,

这里用gulp-htmlmin做例子:

  1. 先下载,npm install htmlmin;
  2. https://www.npmjs.com,去这里搜索插件的文档;
  3. 怎么引用,额,文档里帮你引用好了;如图,复制,粘贴
    在这里插入图片描述
  • 这里代码是不是非常熟悉?没错就是我上面敲的那个,
  • 然后gulpfile.js中的样子就是这样,
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

gulp.task('demo', () => {
    return gulp.src('./src/*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist/html'));
});

然后在当前目录下,命令行输入,运行 gulp demo

  • 运行完后打开我的dist文件夹,然后就能看到压缩文件了,
  • 如果没用,记得检查路径是不是输错了.(反正我第一次路径输错了);
  • (2020-2-6-Rabit)
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页