gulp-uglify在压缩js文件上的一个坑

gulp-uglify在压缩js文件上的一个坑

首先我们在使用gulp命令自动合并和压缩js文件的时候，往往要用到uglify，而在利用uglify压缩js文件后，$(function(){…..})里面包含的内容在压缩后全部为空。

问题原因

没有引入jquery包导致jquery的闭包不能被识别。

解决方案

需要引入uglifyjs

具体执行

npm install uglifyjs --save -g

uglifyjs yourJsFile.js -o result.min.js  --source-map result.min.js.map

总结

虽然使用uglifyjs可以完成包含jquery在内的js的文件压缩，但每一次压缩都需要使用一次命令行的命令，甚是麻烦，这边笔者的一个解决方案是：在开发过程中不进行压缩，只执行concat合并，等到最后可以发布到线上环境后再执行压缩命令即可。

这里附上gulpfile.js代码

'use strict';

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var gutil = require('gulp-util');
var del = require('del');
var uglify = require('gulp-uglify');

gulp.task('less', function() {
    gulp.src('src/less/*.less')
        .pipe(less().on('error', gutil.log))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
  cascade: false
  }))
        //.pipe(cleanCSS({compatibility: 'ie8'}))
  .pipe(gulp.dest('dist/'))
});

gulp.task("js",function(){
    return gulp.src('src/js/*.js').pipe(concat('dnspannel.js')).pipe(gulp.dest('dist/'));

});

gulp.task('image', function() {
    del([
        'dist/images/*'
  ]);
  gulp.src('src/images/*')
        .pipe(gulp.dest('dist/images/').on('error', gutil.log));
});

gulp.task('watch', function() {
    gulp.watch([
        'src/less/**.less',
  'src/less/**/*.less'
  ], ['less']);
  gulp.watch([
        'src/js/**.js',
  ], ['js']);
  gulp.watch([
        'src/images/*'
  ], ['image']);

});

gulp.task('default', ['js', 'less', 'image', 'watch']);