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