zoukankan      html  css  js  c++  java
  • Gulp压缩JavaScript代码

    因为gulp是自动化工具,所以我们得告诉它,需要怎么做,才能达到我们的目的。

    我们首先得新建一个js文件,用来编写我们的需求,以便gulp能按着我们的意愿来执行。

    我将这个js文件取名叫gulpfile.js( 且必须取为gulpfile名,否则在node环境下运行是,会报错:No gulpfile found)

    gulpfile.js  的文件内容是

    //引入gulp
    var gulp = require('gulp');
    //引入gulp-uglify模块,用于压缩JS
    var uglify = require('gulp-uglify');
    //'minjs'为我们自定义的任务名,匿名函数为'minjs'具体任务
    gulp.task('minjs', function(){
        // 'script/*.js'是需要压缩的js文件
        gulp.src('script/*.js')
    //uglify()是调用的压缩方法,去压缩js .pipe(uglify()) //gulp.dest是将压缩后的文件另存为哪的方法,如存到newScript文件夹中 .pipe(gulp.dest('newScript')); });

    然后我们在script文件夹下新建test.js,文件内容自己定,我的是这个样子

    然后我们用命令法

     但是我们会发现报错

    我们需要安装uglify

    安装好uglify之后再次执行gulp minjs

     打开script下的js文件,会发现文件已经被压缩,OK

     

    但是不知道大家发现上述的代码有个不足没?

    如果文件改变了,我们每次都得自己手动在node环境下,输入gulp + 相应任务名执行操作。

    说好的自动化呢?

    所以我们得修改上述代码,让其自动化--一旦script文件下的js文件变动,就自己自行压缩。

    利用gulp.watch方法,可监听文件,来弥补这一不足,如:在这里监听script下的js文件。(一旦变化,就自动压缩)

    如下:

    修改gulpfile.js,内容如下

    //引入gulp
    var gulp = require('gulp');
    //引入gulp-uglify模块,用于压缩JS
    var uglify = require('gulp-uglify');
    //引入gulp-watch-path
    var watchPath = require('gulp-watch-path');
    //'firstScript'为我们自定义的任务名,匿名函数为'firstScript'具体任务
    gulp.task('minjs', function(){
    // 'script/*.js'是即将压缩的js文件
    gulp.src('script/*.js')
    //uglify()是调用的压缩方法,去压缩js
    .pipe(uglify())
    //gulp.dest是将压缩后的文件另存为哪的方法,如存到newScript文件夹中
    .pipe(gulp.dest('new'));
    });
    //新增一个auto任务
    gulp.task('auto', function(){
    //利用watch方法监听script下的js文件,如果变动,则执行firstScript任务
    //gulp.watch('script/*.js', ['minjs']);
    //event为gulp.watch回调函数中的event
    gulp.watch('script/*.js', function(event){
    var paths = watchPath(event, 'script', 'new');
    gulp.src(paths.srcPath)
    .pipe(uglify())
    //paths.distDir为目录文件,如果换成paths.distPath,会报错:file already exists
    .pipe(gulp.dest(paths.distDir));
    });
    });
    //将需要默认执行的任务名,添加到default任务中,如,添加上面的‘auto’任务
    gulp.task('default',['auto']);

    执行以下代码

    文件会自动被压缩,OK,小伙伴们去试一试吧
  • 相关阅读:
    2020年全国安全生产月活动主题、挂图、招贴、标语、宣教用书等系列产品
    2020年安全生产月主题挂图指定宣教用品目录
    LNMP分离式部署步骤详解
    FTP文件传输服务
    DNS域名解析服务配置与测试
    DHCP服务搭建测试流程
    mysql数据库的操作
    mysql源码编译安装及其配置
    生产环境中ansible的安全处理
    http网页返回码详解
  • 原文地址:https://www.cnblogs.com/zpfind/p/6146414.html
Copyright © 2011-2022 走看看