gulp初探

很多人都在用grunt和gulp,我现在连github都不用。。为了说自己是个前端,还是搞搞gulp吧

nodejs很多人都会安装,这个不是问题

npm模块现在好像是自带的。。我忘了。。

先全局安装下gulp

npm install gulp -g

好像默认到user下的了。

然后在D盘找个文件夹test。

安装局部的gulp

再安装两个模块gulp-uglify,gulp-concat(合并。压缩)

npm install gulp --save-dev

案例:合并压缩js文件夹下的两个js,压缩后的文件放在build目录下,命名为all.min.css

js下的index.js

1 js下的main.js
2 
3 var main=main || {};
4 main.test=function(argument){
5     console.log("main test");
6 }
7 me.test();

gulpfile是用来处理操作的文件,我们执行压缩和合并命令

 1 var gulp =require('gulp');
 2 //加载合并和压缩组件
 3 var uglify=require('gulp-uglify');
 4 var concat=require("gulp-concat");
 5 
 6 /*
 7 var paths={
 8     script:['js/index.js','js/main.js']
 9 }
10 */
11 gulp.task('default',function(){
12     //也可以指定path
13     gulp.src("js/*.js")
14         .pipe(uglify())
15         .pipe(concat('all.min.js'))
16         .pipe(gulp.dest('build'));
17 })

说明下,build的all.min.js文件我们需要先创建,内容为空就行了

在cmd中进入test的目录,然后运行

gulp

会提示成功,我们再去bulid下的all.min.js看看

1 var index={};index={test:function(e){console.log("test")}},index.test();
2 var main=main||{};main.test=function(n){console.log("main test")},me.test();

已经压缩合并成功了

原文地址:https://www.cnblogs.com/anxiaoyu/p/6520538.html