Gulp入门常用操作

今天药忘吃喽~ 2022-12-27 08:51 166阅读 0赞

> 第一天用gulp，如有不足，欢迎指出！

# 安装 #

照着[gulp官网的入门指南][gulp]，安装环境

# 全局安装gulp-cli
    npm i gulp-cli -g
    # 项目下安装gulp
    npm init -y
    npm i gulp -D

创建gulpfile.js

function defaultTask(cb) {
      // place code for your default task here
      cb();
    }
    
    exports.default = defaultTask

运行gulp命令

# Babel转义 #

### ES6代码 ###

创建一个es6语法写的js文件

### gulpfile.js ###

### .babelrc ###

{
      "presets": ["@babel/preset-env"]
    }

> 如果设置为“env”，可能会报错：**Cannot read property 'bindings' of null**

### dist ###

运行命令“gulp”，查看dist下的文件

'use strict';
    var originUrl = 'htt://www.xxx.com';
    var url = ''.concat(originUrl, '/123');
    var obj = {
        fn: function fn() {
            console.log(url);
        },
        url: url
    };
    var fn = function fn() {
        obj.fn();
    };
    fn();

--------------------

# 移除‘use strict’ #

npm i remove-use-strict-from-js -D

const gulp = require("gulp");
    const babel = require('gulp-babel');
    const removeStrict = require("remove-use-strict-from-js");
    const {src, dest} = gulp;
    
    function defaultTask(cb) {
      src("home.js").pipe(babel()).pipe(removeStrict()).pipe(dest("dist"));
      cb();
    }

--------------------

# 压缩 #

npm i gulp-uglify -D

const gulp = require("gulp");
    const babel = require('gulp-babel');
    const uglify = require('gulp-uglify');
    const removeStrict = require("remove-use-strict-from-js");
    const {src, dest} = gulp;
    
    function defaultTask(cb) {
      src("home.js").pipe(babel()).pipe(removeStrict()).pipe(uglify()).pipe(dest("dist"));
      cb();
    }
    
    exports.default = defaultTask;

[gulp]: https://www.gulpjs.com.cn/docs/getting-started/quick-start/