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就行.
原文地址:https://www.cnblogs.com/yinwangyizhi/p/9039388.html