gulp前端自动化构建工具学习笔记（mac）
gulp是一个前端自动化构建工具，简单方便，学习起来也很方便。gulp是基于node.js的，所以首先要在电脑上安装node.js.
1：安装node.js
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
2：安装cnpm；
- 说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
- 官方网址：http://npm.taobao.org
- 安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org - 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
3：全局安装gulp；
npm install -g gulp //-g 全局安装的意思
4：使用终端工具新建一个文件夹做为项目根目录
mkdir gulptest //mkdir 是终端新建文件夹的命令 gulptest是新建文件夹的名字
5：初始化gulp
cnpm init //初始化gulp 自动创建package.json package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
初始化之后 直接都是默认 只需要修改红框中的 js名称 改成gulpfile.js 最后输入yes完成 package.json的创建。
6：安装gulp 用到的工具包 （我这里只在项目中安装了gulp gulp-less gulp-minify-css browser-sync）
进入到项目文件夹下 cnpm install gulp --save-dev （gulp）为插件名称
安装完成之后会在项目中自动生成一个文件夹node_modules 存放安装的工具包
gulp 在项目中重新安装一下gulp
gulp-less 把less文件编译成css文件的插件
gulp-minify-css 压缩css的插件
browser-sync 保存文件浏览器自动刷新的插件
7：用webstorm打开gulptest项目 创建文件夹以及文件结构如下
src>>less>>index.less 该文件为自己编写的less文件
src>>css>> 该文件夹下存放的less被编译成功后的css文件
dist>>css>> 该文件夹下存放的是被压缩后的用于项目中的css文件
8：编写gulpfile.js文件
//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 less = require('gulp-less'), //less编译 cssmin = require('gulp-minify-css'), //css压缩 browserSync = require("browser-sync").create(), reload = browserSync.reload; /** * 定义一个Less编译任务 */ gulp.task('Less', function () { gulp.src('src/less/index.less') //该任务针对的文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css }); /** * css压缩任务 */ gulp.task('minCss', function () { gulp.src('src/css/index.css') .pipe(cssmin()) .pipe(gulp.dest('dist/css')) }); /** * 监听css文件，当src/css/下所有css文件发生改变时，调用minCss任务 */ gulp.task('WatchCss', function () { gulp.watch('src/css/*.css', ['minCss']); }); /** * 监听less文件，当src／less下所有的less文件发生改变时，调用Less任务 */ gulp.task('Watch', function () { gulp.watch('src/**/*.less', ['Less']); //当所有less文件发生改变时，调用testLess任务 }); gulp.task('default',['Less','Watch','minCss','WatchCss',]); //定义默认任务 只需要开启默认任务就可以
9：webstorm 如何打开gulp任务管理器
在gulpfile.js上右击鼠标，选择Show Gulp Tasks ，在打开的gulp任务列表中双击default 即可开启任务。
10：编写less代码
打开index.less 文件 编写一段less代码 保存一下 会自动生成css文件和压缩后的css文件。
编译后的css文件：
压缩后的css文件