gulp自动化构建工具--压缩css--学习笔记

gulp是基于node实现的，那么我们就需要先安装node

打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下载安装 node。

以下操作是在Windows环境下运行。

打开命令行Windows+R 或者开始-运行-cmd打开

安装nodejs（此处省略nodejs的安装方式，有需要可去node官网查看详细教程）

在命令行通过cd..跳转到所在项目 也可直接在所在项目通过shift+鼠标右键-->点击在此处打开命令窗口

npm 是 node 的包管理工具，可以利用它安装 gulp 所需的包。（在安装 node 时已经自动安装了 npm）

使用npm全局安装gulp

在命令行输入全局安装gulp

     npm install -g gulp  或者使用cnpm install -g gulp

作为项目的开发依赖（devDependencies）安装：

     npm install --save-dev gulp

1、安装压缩插件

     命令：npm install gulp-minify-css 或者 cnpm install gulp-minify-css

2、新建一个gulpfile.js文件

//压缩css
//获取gulp
var gulp = require('gulp')

//获取minify-css模块（用于压缩css）
var minifyCss = require('gulp-minify-css')
//压缩css文件
//在命令行使用gulpcss启动此任务
gulp.task('css',function(){
    //1.找到文件
    gulp.src('views/css/*.css')
    //2.压缩文件
    .pipe(minifyCss())
    //3.另存为压缩文件
    .pipe(gulp.dest('views/dist/css'))
}) 

//在命令使用gulp auto启动此文件
gulp.task('auto',function(){
     //监听文件修改，当文件被修改则执行css任务
     gulp.watch('views/css/*.css',['css'])
});

//使用gulp.task('default')定义默认任务
//在命令行使用gulp启动script任务和auto任务
gulp.task('default',['css','auto'])

3、执行

     gulp

ps：如直接复制gulpfile.js文件，需更改项目地址