看流程之前一定得先相识一下gulp.js吧,附上链接,人人本身去看APIgulp.js中文网
下面就来说说怎样运用gulp.js,gulp.js是基于node来运用的,那末题目又来了,nodejs怎样装置,这个人人照样去菜鸟教程看一下;这里就不多说了;
第一步.在终端输入
node -v
检察一下你的nodejs是不是装置胜利,假如装置胜利, 就会提醒你的版本 ,我的是 v4.4.4;
第二步.全局装置gulp
sudo npm install gulp@latest -g
第三部.装置项目的开辟依靠
sudo npm install –save-dev gulp
第四步.在项目根目录下建立一个名为 gulpfile.js 的文件
var gulp = require(‘gulp’);
gulp.task(‘default’, function() {
// 将你的默许的使命代码放在这
});
第五步.装置紧缩的模块
css装置模块, gulp-minify-css模块;在命令行输入,
sudo npm install gulp-minify-css
装置胜利今后会提醒你,正告’
npmWARNdeprecated gulp-minify-css@1.2.4: Please use gulp-clean-css’,那你就需要再次装置一下
sudo npm install gulp-clean-css,
装置胜利今后就能够用啦;
js模块,gulp-gulify
sudo npm install gulp-uglify@latest
好啦,两个都装置胜利了,接下来就是运用的时刻啦;直接上代码
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minfy = require('gulp-minify-css');
// 建立紧缩使命
gulp.task('default', function() {
// gulp.src(path)的参数可认为tring也可认为Array,
//每个元素都是你要紧缩的文件的相对路径
gulp.src(['./static/js/a.js',
'./static/js/b.js',
'./static/js/c.js',
'./static/js/d.js',])
.pipe(uglify())
// gulp.dest(path)能被 pipe 进来,而且将会写文件。
//而且从新输出(emits)一切数据,因而你能够将它 pipe 到多个文件夹。
// 假如某文件夹不存在,将会自动建立它。
.pipe(gulp.dest('./static/min.js'));
gulp.src(['./static/css/a.css',
'./static/css/b.css',
'./static/css/c.css',
'./static/css/d.css'])
.pipe(minfy())
.pipe(gulp.dest('./static/min.css'));
});
注重js和css,pipe的时刻要援用对哦