- 同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就行.