zoukankan      html  css  js  c++  java
  • gulp 压缩js文件,将其变成一行.

    • 同css加前缀一样,先下载安装node.js.(当然,如果已经安装,那就自然没必要重按)
    • 然后通过node.js的npm插件下载各自文件插件

      利用cmd找到根目录  //如 f:[回车] cd webbg[回车]

        然后npm init  //创建的一个工程目录

          npm install -g bower  //下载bower

          npm i -g gulp     //下载gulp

          npm i pump      //下载pump

          npm i gulp-rename  //下载gulp-rename插件,用于改名字

           npm i gulp-uglify   //下载gulp-uglify插件,用于压缩js文件

    • 编写gulpfile.js,用于gulp调用,完成js自动压缩

          var gulp=require('gulp'),  
            pump=require('pump'),
            rename=require('gulp-rename'),
            uglify=require('gulp-uglify');

                    //定义各类文件插件,由于用逗号分割,所以不用重复使用var.

          gulp.task('jsmin',function(cb){
            pump([
              gulp.src('js/*.js'),    //同样的载入路径,星号(*)代表全部的.js文件
              rename({'suffix':'.min'}),  //这里是修改名字,在原有的名字后面+.min.应用到的是gulp-rename插件.
              uglify(),        //这是将js文件压缩的调用函数.

              gulp.dest('app/')    //这是输出的路径,同样没有该文件的话,会自动创建.
              ],cb)
            })

     

    • gulp prefixer 调用

         在cmd根文件下输入 gulp jsmin.  //这里的jsmin  gulp.task('jsmin',function(cb){} 中的对应,且可以随意命名,但必须一致.

    事实上,无论是css+前缀,还是js压缩,都是能放进一个js文件的.

    var gulp=require('gulp');
    var pump=require('pump');
    var rename=require('gulp-rename');
    var prefixer=require('gulp-autoprefixer');
    var uglify=require('gulp-uglify');
    
    gulp.task('prefixer',function(cb){
        pump([
                gulp.src('./style/*.css'),
                prefixer({
                    borwsers:["last 2 version"],
                    remove:true,
                    cascade:false
                }),
                rename({'suffix':'.min'}),
                gulp.dest('./style')
            ],cb)
    });
    
    gulp.task('ugly',function(cb){
        pump([
            gulp.src('script/*.js'),
            rename({'suffix':'.min'}),
            uglify(),
            gulp.dest('script')
            ],cb)
    })
    
    gulp.task('default',['prefixer','ugly']);
    //自动化处理
    而这个gulp.task('default',['prefixer','ugly']);是自动处理全部的gulp.task()里的语句.调用时,只要在cmd中输入gulp就行.
  • 相关阅读:
    js动态添加、删除行
    java内存问题排查及分析
    IDE 热部署配置
    Target JRE version (1.7.0_79) does not match project JDK version (java version "1.8.0_171"), will use sources from JDK: 1.7
    快速排序
    归并排序思想
    算法总结
    百度2013校园招聘笔试题(含整理的答案)
    浙江省委书记(习):加快推进节约型社会建设
    申论方面的经验
  • 原文地址:https://www.cnblogs.com/yinwangyizhi/p/9039388.html
Copyright © 2011-2022 走看看