«

gulp压缩工具

emer 发布于 2018-9-12 11:29   2699 次阅读     


主要失败的原因是gulp-babel版本不对会报找不到babel-core错误,安装gulp-babel@7就行了

cnpm install gulp -D

cnpm install gulp-babel@7 -D

//cnpm install gulp-babel@6-D

cnpm install gulp-uglify -D

cnpm install babel-preset-env -D

package:


{
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.3",
    "gulp-less": "^4.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.1",
    "gulp-watch": "^5.0.1"
  }
}
压缩混淆:
var gulp = require("gulp");  
 var gulpless=require('gulp-less');
 var  minicss=require('gulp-minify-css');
 var watch=require("gulp-watch");
 js_obfuscator = require('gulp-js-obfuscator');
    //引入

  //var babel1=require("babel-core");
    var babel=require('gulp-babel');
    var  uglify = require('gulp-uglify');
    var path="";
    /*本方法是用来实现压缩js文件夹*/
    gulp.task("minjs",function(){

        //需要转码的es6文件,code文件夹下的任何一个后缀名为.js的文件,code文件夹需要手动创建

        return gulp.src("js/*.js")
        .pipe(babel({
          "presets": ["env"]
        }))
        .pipe(uglify()).
        pipe(gulp.dest("dist/js"));

       });
    /*本文件夹是用来实现压缩css文件夹的*/
      gulp.task("mincss",function(){

        //需要转码的es6文件,code文件夹下的任何一个后缀名为.js的文件,code文件夹需要手动创建

        return gulp.src("./css/*.less")
        .pipe(gulpless())
        .pipe(minicss())
        .pipe(gulp.dest('./css/'))

       });

       gulp.task("mini",function(){

        //需要转码的es6文件,code文件夹下的任何一个后缀名为.js的文件,code文件夹需要手动创建

         watch("./css/*.less",function(event){
          gulp.src(event.path)
         .pipe(gulpless())
         .pipe(minicss())
         .pipe(gulp.dest('./css/'))
         })
         watch("./dist/*.js",function(event){
         gulp.src(event.path)
      .pipe(babel({
           "presets": ["env"]
           }))
         .pipe(uglify())
         .pipe(js_obfuscator({}, ["./dist/jquery-*.js"])).
         pipe(gulp.dest("js/"));
         })

       });


gulpfile.js:


 var gulp = require("gulp");  
 var gulpless=require('gulp-less');
 var  minicss=require('gulp-minify-css');
 var watch=require("gulp-watch");
    //引入

  //var babel1=require("babel-core");
    var babel=require('gulp-babel');
    var  uglify = require('gulp-uglify');
    var path="";
    /*本方法是用来实现压缩js文件夹*/
    gulp.task("minjs",function(){

        //需要转码的es6文件,code文件夹下的任何一个后缀名为.js的文件,code文件夹需要手动创建

        return gulp.src("js/*.js")
        .pipe(babel({
        "presets": ["env"]
        }))
        .pipe(uglify()).
        pipe(gulp.dest("dist/js"));

       });
    /*本文件夹是用来实现压缩css文件夹的*/
      gulp.task("mincss",function(){

        //需要转码的es6文件,code文件夹下的任何一个后缀名为.js的文件,code文件夹需要手动创建

        return gulp.src("./less/*.less")
        .pipe(gulpless())
        .pipe(minicss())
        .pipe(gulp.dest('./dist/css/'))

       });

       gulp.task("mini",function(){

        //需要转码的es6文件,code文件夹下的任何一个后缀名为.js的文件,code文件夹需要手动创建

         watch("./less/*.less",function(event){
        gulp.src(event.path)
        .pipe(gulpless())
        .pipe(minicss())
        .pipe(gulp.dest('./dist/css/'))
        })
         watch("./js/*.js",function(event){
        gulp.src(event.path)
    .pipe(babel({
        "presets": ["env"]
          }))
        .pipe(uglify()).
        pipe(gulp.dest("dist/js"));
        })

       });