文件压缩: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)