Gulp 学习笔记

1 - css移动端适配，js转译

前置条件

库	版本
gulp	4.0.2
nodejs	13

（不保证以下适合所有版本）

更新日期：

• 191223

CSS的vw适配与压缩

需求：

• 使用vw适配方案做移动端适配
• 压缩css

对于 vw 适配方案的实现，我使用到了 postcss 与 postcss-px-to-viewport 来实现。

对于压缩 css 的需求，使用到了 gulp-clean-css 来实现（网上也有说使用gulp-minify-css 拓展的，但是这个拓展现在已经弃用了，gulp-clean-css 更受推荐）。

Step 1: 首先安装依赖

npm i --save-dev gulp, gulp-clean-css, gulp-postcss, postcss-px-to-viewport

Step 2: 编写 Gulp 任务

const {
    src,
    dest
} = require('gulp');

const postcss = require('gulp-postcss');
const pxtoviewport = require('postcss-px-to-viewport');
const cleanCSS = require('gulp-clean-css');

/**
 * 转译css：px单位转成vw单位，压缩css文件
 */
const transpileCSS = () => {
    const processors = [pxtoviewport({
      // 视窗宽度，和设计图一致
      viewportWidth: 750,
      // 单位精度，小数点后四位
      unitPrecision: 4,
      // 视窗宽度
      viewportUnit: 'vw'
    })];

    return src(['css/**/*.css'], {
            sourcemaps: true
        })
        // 转译px单位至vw单位
        .pipe(postcss(processors))
        // 压缩css文件：去除注释与多余的空格空行等
        .pipe(cleanCSS())
        // 构建到build/css目录
        .pipe(dest('build/css'));
};

// 导出css
exports.css = transpileCSS;

控制台执行命令

npx gulp css

JS的转译与压缩

需求：

• 适配旧版本浏览器
• 压缩 js 代码

对于 JS 的转译，我使用到了 babel转译工具使得我们可以使用最新的语法，且不用担心适配旧版本的浏览器。使用了uglifyjs来做js压缩。

Step 1: 首先安装需要的包

npm i --save-dev gulp-babel, @babel/preset-env, @babel/core, gulp-uglify

Step 2: 编写 gulp 命令

const {
    src,
    dest
} = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

/**
 * 转译并压缩 js 代码
 */
const transpileJS = () => {
    // 首先取得app/static/scripts下的所有为.js的文件（**/的意思是包含所有子文件夹)
    return src(['js/**/*.js'], {
            ignore: ['js/lib/**/*.js'],
            sourcemaps: true
        })
        //将ES6代码转译为可执行的JS代码
        .pipe(babel())
        //js压缩
        .pipe(uglify())
        //将转译压缩后的文件输出到 build/js 下（假如没有dist目录则自动生成dist目录）
        .pipe(dest('build/js'));
}


exports.js = transpileJS;

Step 3: 在项目根目录下新建一个 .babelrc 文件，对 babel 进行配置（babel 配置项很多，不做赘述）。下面使用了 babel 预设的配置

{
    "presets": [
        ["@babel/preset-env", {
            "loose": true,
            "modules": false
        }]
    ]
}

Step 4: 控制台运行脚本

npx gulp js

监听文件修改，并自动编译

const watchModify = () => {
    watch(['css/**/*.css'], transpileCSS);
    watch(['js/**/*.js'], transpileJS);
}

exports.watch = watchModify;

npx gulp watch