利用gulp工具来压缩css文件

来源:互联网 发布:fifa online数据库 编辑:程序博客网 时间:2024/05/22 15:30

压缩 css 代码可降低 css 文件大小,提高页面打开速度,因此也可以提高网页的性能,接下来我们来看一下,我们怎么利用gulp工具来进行css文件的压缩。

1)首先我们先安装gulp这个工具,安装这个工具之前需要本地环境支持node.js,所以我们首先安装的是node.js,这个倒是挺容易安装的,去官网去下载.mis安装包,很快我们就可以安装好了。安装了node.js,里面内置有npm(包管理器),我们可以直接使用npm来直接安装gulp,但是为了安装速度快一点,我们可以采用国内的淘宝镜像来进行安装。

在命令提示符中输入:

npm install -g cnpm --registry=https://registry.npm.taobao.org
之后我们就使用cnpm来代替npm.

2)然后在global环境和项目文件中都install gulp

npm install gulp -g   (global环境)

npm install gulp --save-dev (项目环境)

3)在项目中install需要的gulp插件,一般只压缩的话需要

    npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

    更多插件可以在这个链接中找到 http://gratimax.NET/search-gulp-plugins/

4)在你的文件的根目录下建立一个gulpfile.js文件

然后在里面写

 var gulp = require('gulp'),          minifycss = require('gulp-minify-css'),          concat = require('gulp-concat'),          uglify = require('gulp-uglify'),          rename = require('gulp-rename'),          del = require('del');gulp.task('css',function(){return gulp.src('css/*.css').pipe(minifycss()).pipe(gulp.dest('minifyed/css'))});gulp.task('default',['css']);
.pipe(minifycss()):指的是压缩文件,

.pipe(gulp.dest('minifyed/css')):指的是把压缩后的文件放进minifyed文件夹中的css文件中。
5)然后在命令提示符中,在文件夹的目录下,运行gulp命令行,就可以将css文件压缩。