利用gulp.js压缩css,js文件流程

看流程之前肯定得先了解一下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'));

});

最后一步 gulp一下就OK啦
注意js和css,pipe的时候要引用对哦