?

gulp是基于node實(shí)現(xiàn)的，那么我們就需要先安裝node

打開 https://nodejs.org/ 點(diǎn)擊綠色的 INSTALL 按鈕下載安裝 node。

以下操作是在Windows環(huán)境下運(yùn)行。

打開命令行Windows+R 或者開始-運(yùn)行-cmd打開

安裝nodejs（此處省略nodejs的安裝方式，有需要可去node官網(wǎng)查看詳細(xì)教程）

在命令行通過cd..跳轉(zhuǎn)到所在項(xiàng)目 也可直接在所在項(xiàng)目通過shift+鼠標(biāo)右鍵-->點(diǎn)擊在此處打開命令窗口

npm 是 node 的包管理工具，可以利用它安裝 gulp 所需的包。（在安裝 node 時(shí)已經(jīng)自動(dòng)安裝了 npm）

使用npm全局安裝gulp

在命令行輸入全局安裝gulp

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

作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝：

npm install --save-dev gulp 1、安裝壓縮插件

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

2、新建一個(gè)gulpfile.js文件

//壓縮css //獲取gulp var gulp = require('gulp')//獲取minify-css模塊（用于壓縮css） var minifyCss = require('gulp-minify-css') //壓縮css文件 //在命令行使用gulpcss啟動(dòng)此任務(wù) gulp.task('css',function(){//1.找到文件gulp.src('views/css/*.css')//2.壓縮文件 .pipe(minifyCss())//3.另存為壓縮文件.pipe(gulp.dest('views/dist/css')) }) //在命令使用gulp auto啟動(dòng)此文件 gulp.task('auto',function(){//監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行css任務(wù)gulp.watch('views/css/*.css',['css']) });//使用gulp.task('default')定義默認(rèn)任務(wù) //在命令行使用gulp啟動(dòng)script任務(wù)和auto任務(wù) gulp.task('default',['css','auto'])

3、執(zhí)行

? ? ?gulp

ps：如直接復(fù)制gulpfile.js文件，需更改項(xiàng)目地址

轉(zhuǎn)載于:https://www.cnblogs.com/CaktyRiven/p/6419477.html

總結(jié)

以上是生活随笔為你收集整理的gulp自动化构建工具--压缩css--学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。