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文件，需更改项目地址

转载于:https://www.cnblogs.com/CaktyRiven/p/6419477.html

总结

以上是生活随笔为你收集整理的gulp自动化构建工具--压缩css--学习笔记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。