如何使用gulp-uglify缩小ES6功能?

时间:2017-07-06 20:23:23

标签: javascript node.js ecmascript-6 gulp gulp-uglify

当我运行gulp时,我收到以下错误:

[12:54:14] { [GulpUglifyError: unable to minify JavaScript]
cause:
{ [SyntaxError: Unexpected token: operator (>)]
 message: 'Unexpected token: operator (>)',
 filename: 'bundle.js',
 line: 3284,
 col: 46,
 pos: 126739 },
plugin: 'gulp-uglify',
fileName: 'C:\\servers\\vagrant\\workspace\\awesome\\web\\tool\\bundle.js',
showStack: false }

违规行包含箭头功能:

var zeroCount = numberArray.filter(v => v === 0).length

我知道我可以用以下内容替换它来解决缩小错误:

var zeroCount = numberArray.filter(function(v) {return v === 0;}).length

如何在包含ES6功能的代码上运行gulp而不会导致缩小失败?

8 个答案:

答案 0 :(得分:31)

您可以利用gulp-babel ......

let gulp = require('gulp');
let babel = require('gulp-babel');
let uglify = require('gulp-uglify');

gulp.task('minify', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    // [...]
});

这将在您的管道中提前转换您的es6,并在您缩小时生成广泛支持的“普通”JavaScript。

可能需要注意 - 正如评论中所指出的那样 - 核心babel编译器在此插件中以peer dependency形式发布。如果没有通过您的仓库中的另一个dep下拉核心库,请确保在您的末端安装了该库。

查看gulp-babel中的peer dependency,作者正在指定@babel/core(7.x)。虽然稍微长一点babel-core(6.x)也可以。我的猜测是作者(这两个项目都是一样的)正处于重组模块命名的中间位置。无论哪种方式,两个npm安装端点都指向https://github.com/babel/babel/tree/master/packages/babel-core,所以你可以使用以下任何一个... ...

npm install babel-core --save-dev

npm install @babel/core --save-dev

答案 1 :(得分:29)

接受的答案并非真正回答如何缩小直接es6。如果你想在不进行转换的情况下缩小es6,gulp-uglify v3.0.0就可以实现:

更新2019年3月

使用我的原始答案,您可能希望将{uglify-es包替换为terser,因为似乎不再维护uglify-es。

原始答案,仍有效:

1。)首先,将gulp-uglify包升级为> 3.0.0如果您正在使用纱线并希望更新到最新版本:

yarn upgrade gulp-uglify --latest

2。)现在你可以使用uglify-es," es6版本" uglify,如此:

const uglifyes = require('uglify-es');
const composer = require('gulp-uglify/composer');
const uglify = composer(uglifyes, console);

gulp.task('compress', function () {
    return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});

了解更多信息:https://www.npmjs.com/package/gulp-uglify

答案 2 :(得分:17)

您实际上可以在不进行转换的情况下使用ES6代码。而不是gulp-uglify插件,请使用gulp-uglifyes插件。

var gulp = require('gulp');
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglifyes');
var plumber = require('gulp-plumber');
var plumberNotifier = require('gulp-plumber-notifier');
var sourcemaps = require('gulp-sourcemaps');
var runSequence = require('run-sequence').use(gulp);

gulp.task('minjs', function () {
  return gulp.src(['/dist/**/*.js', '!/dist/**/*.min.js'])
    .pipe(plumberNotifier())
    .pipe(sourcemaps.init())
    .pipe(uglify({ 
       mangle: false, 
       ecma: 6 
    }))
    .pipe(rename(function (path) {
      path.extname = '.min.js';
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('/dist'));
});

答案 3 :(得分:2)

吞咽:

ES6及更高版本。

  1. 安装:npm install --save-dev gulp-uglify
  2. 安装:npm install --save-dev gulp-babel @babel/core @babel/preset-env

用法:

const gulp = require('gulp'); 
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('script', () => {
    return gulp.src('src/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('src/dist'))
});

答案 4 :(得分:2)

使用gulp-uglify-es代替gulp-uglify可以帮助我完美地完成您所要求的

答案 5 :(得分:1)

很遗憾,就目前而言,您无法将uglifyes-next代码一起使用, 你可以:

  1. 使用 Babel
  2. ES5透明
  3. 使用Babili代替 Uglify

答案 6 :(得分:1)

我花了一段时间才开始工作。正如其他答案所指出的那样,问题是 gulp-uglify 不支持ES6。 gulp-uglify-es 可以,但是如果不再维护。 Terser 是其他人推荐的,但是与gulp搭配pipe()使用时效果不佳。

如果您在我使用 gulp-uglify 时,您的gulpfile.js如下所示:

var uglify = require('gulp-uglify');
const html2js = () => {
     var source = gulp.src(config.appFiles.templates);
    return source
        .pipe(concat('templates-app.js'))
        .pipe(uglify())
        .pipe(gulp.dest(config.buildDir));
};

不过,您可以使用 gulp-terser 包,该包非常容易替换,即可获得相同的功能:

var terser = require('gulp-terser');
const html2js = () => {
     var source = gulp.src(config.appFiles.templates);
    return source
        .pipe(concat('templates-app.js'))
        .pipe(terser())
        .pipe(gulp.dest(config.buildDir));
};

答案 7 :(得分:0)

    #include <iostream>
    #include <cstdlib>

using namespace std;
class BST
{
    private:
        struct tree_node
        {
           tree_node* left;
           tree_node* right;
           int data;
        };


    public:
        BST()
        {
           root = NULL;
           parent = NULL;
        }
        tree_node* root;
        tree_node* parent;

        bool isEmpty() const { return root==NULL; }
        void print_inOrder();
        void inOrder(tree_node*);
        void print_preOrder();
        void preOrder(tree_node*);
        void print_postOrder();
        void postOrder(tree_node*);
        void search(tree_node*,int,tree_node*);
        void insert(int);
        void create(int);
        void remove(int);
};

void BTS::search(tree_node* root,int k,tree_node* parent)
{

    if (root == nullptr)
    {
        cout << "Element not found"<<endl;
        return;
    }
    if (root->data == k)
    {
        if (parent == nullptr)
            cout << "element " << k << " found "; //jeigu ieskomas skaicius medzio virsune

        else cout << "element "<<k<<" found "<<endl;
        return;
    }
    if (k < root->data)
        return searcch(root->left,k, root); // rekursija jeigu reiksme mazesne uz sakny einame i kaire

    return search(root->right,k,root);// rekursija jeigu reiksme mazesne uz sakny einame i desine
}

void BTS::create(int d)
{
    for(int i=0;i<d;i++)
    {
    tree_node* t = new tree_node;
    tree_node* parent;
    cout<<"enter element"<<endl;
    cin>>t->data;
    t->left = NULL;
    t->right = NULL;
    parent = NULL;

    if(isEmpty()) root = t;
    else
    {
        tree_node* current;
        current = root;
        while(current)
        {
            parent = current;
            if(t->data > current->data) current = current->right;
            else current = current->left;
        }

        if(t->data < parent->data)
           parent->left = t;
        else
           parent->right = t;
    }
    }
}

void BTS::remove(int d)
{
    bool found = false;
    if(isEmpty())
    {
        cout<<" tree is empty "<<endl;
        return;
    }
    tree_node* curr;
    tree_node* parent;
    curr = root;

    while(curr != NULL)
    {
         if(curr->data == d)
         {
            found = true;
            break;
         }
         else
         {
             parent = curr;
             if(d>curr->data) curr = curr->right;
             else curr = curr->left;
         }
    }
    if(!found)
         {
        cout<<" element not found"<<endl;
        return;
    }


    if((curr->left == NULL && curr->right != NULL)|| (curr->left != NULL
&& curr->right == NULL))
    {
       if(curr->left == NULL && curr->right != NULL)
       {
           if(parent->left == curr)
           {
             parent->left = curr->right;
             delete curr;
           }
           else
           {
             parent->right = curr->right;
             delete curr;
           }
       }
       else
       {
          if(parent->left == curr)
           {
             parent->left = curr->left;
             delete curr;
           }
           else
           {
             parent->right = curr->left;
             delete curr;
           }
       }
     return;
    }
         if( curr->left == NULL && curr->right == NULL)
    {
        if(parent->left == curr) parent->left = NULL;
        else parent->right = NULL;
                 delete curr;
                 return;
    }
    if (curr->left != NULL && curr->right != NULL)
    {
        tree_node* chkr;
        chkr = curr->right;
        if((chkr->left == NULL) && (chkr->right == NULL))
        {
            curr = chkr;
            delete chkr;
            curr->right = NULL;
        }
        else
        {
            if((curr->right)->left != NULL)
            {
                tree_node* lcurr;
                tree_node* lcurrp;
                lcurrp = curr->right;
                lcurr = (curr->right)->left;
                while(lcurr->left != NULL)
                {
                   lcurrp = lcurr;
                   lcurr = lcurr->left;
                }
        curr->data = lcurr->data;
                delete lcurr;
                lcurrp->left = NULL;
           }
           else
           {
               tree_node* tmp;
               tmp = curr->right;
               curr->data = tmp->data;
           curr->right = tmp->right;
               delete tmp;
           }

        }
         return;
    }

}

void BTS::print_inOrder()
{
  inOrder(root);
}

void BTS::inOrder(tree_node* p)// naudojant rekursija atspausdinu medi vidniu apejimu
{
    if(p != NULL)
    {
        if(p->left) inOrder(p->left);
        cout<<" "<<p->data<<" ";
        if(p->right) inOrder(p->right);
    }
    else return;
}


void BTS::print_preOrder()
{
    preOrder(root);
}

void BTS::preOrder(tree_node* p)// naudojant rekursija atspausdinu medi tiesioginu apejimu
{
    if(p != NULL)
    {
        cout<<" "<<p->data<<" ";
        if(p->left) preOrder(p->left);
        if(p->right) preOrder(p->right);
    }
    else return;
}

void BTS::print_postOrder()
{
    postOrder(root);
}

void BTS::postOrder(tree_node* p) // naudojant rekursija atspausdinu medi atvikstiniu apejiu
{
    if(p != NULL)
    {
        if(p->left) postOrder(p->left);
        if(p->right) postOrder(p->right);
        cout<<" "<<p->data<<" ";
    }
    else return;
}
void BTS::insert(int d)
{
    tree_node* t = new tree_node;
    tree_node* parent;
    t->data = d;
    t->left = NULL;
    t->right = NULL;
    parent = NULL;

    if(isEmpty()) root = t;
    else
    {
        tree_node* current;
        current = root;
        while(current)
        {
            parent = current;
            if(t->data > current->data) current = current->right;
            else current = current->left;
        }

        if(t->data < parent->data)
           parent->left = t;
        else
           parent->right = t;
    }
}

int main()
{
    BTS b;
    int punktas=0,c,d;

       cout<<endl<<endl;
       cout<<" MENU "<<endl;
       cout<<" ----------------------------- "<<endl;
       cout<<" 1) sukurti "<<endl;
       cout<<" 2) tiesioginis elementu spausdinimas "<<endl;
       cout<<" 3) vidinis elementu spausdinimas "<<endl;
       cout<<" 4) atvirkstinis elementu spausdinimas "<<endl;
       cout<<" 5) iterpti nauja elementa "<<endl;
       cout<<" 6) reiksmes trinimas "<<endl;
       cout<<" 7) reiksmes paieska "<<endl;
       cout<<" 0) Iseiti "<<endl;
       cout<<" Iveskite norima punkta"<<endl;
       cin>>punktas;
       int tikrinimas = 1;

       while(punktas!=0)
       {

           if(punktas==1)
           {cout<<"Kiek reiksmiu bus sarase?"<<endl;
                    cin>>c;
                    b.sukurti(c); //panaudojam klases sukurti funckija
                    tikrinimas = 0;
           }
           else if(punktas==2 && tikrinimas == 0)
                    {
                    cout<<" tiesioginis atspausdinimas "<<endl;
                    cout<<" -------------------"<<endl;
                    b.print_tiesioginis();// panaudojam klases tiesioginis atspausdinias funckija
                    }
           else if(punktas==3 && tikrinimas == 0)
                    {
                    cout<<" vidinis atspausdinimas "<<endl;
                    cout<<" -------------------"<<endl;
                    b.print_vidinis();// panaudoja klases funkcija
                    }
           else if(punktas==4 && tikrinimas == 0)
                    {
                    cout<<" atvirkstinis atspausdinimas "<<endl;
                    cout<<" --------------------"<<endl;
                    b.print_atvirkstinis();// panaudoja klases funkcija
                    }
           else if(punktas==5 && tikrinimas == 0)
                    {cout<<"elemento iterpimas"<<endl;
                     cout<<" --------------------"<<endl;
                     cin>>c;
                     b.iterpti(c);// panaudoja klases funkcija
                    }
           else if(punktas==6 && tikrinimas == 0)
                    {
                    cout<<" iveskite elementa kuri norite istrinti "<<endl;
                    cin>>d;
                    b.salinti(d);// panaudoja klases funkcija
                    }
           else if(punktas==7 && tikrinimas == 0)
                    {
                    cout<<"iveskite reiksme kuria norite surasti"<<endl;
                    cin>>c;
                    b.paieska(b.root,c,b.tevas);
                    }
                    else if(punktas<8){cout<<"sukurkyte medi norit atlikti punktus"<<endl;}
         cout<<"iveskite kita punkta"<<endl;
         cin>>punktas;
       }
}

webpack可以完成工作