gulp前端自动化构建工具学习笔记（mac）

gulp是一个前端自动化构建工具，简单方便，学习起来也很方便。gulp是基于node.js的，所以首先要在电脑上安装node.js.

1：安装node.js

　　npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

2：安装cnpm；

1. 说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
2. 官方网址：http://npm.taobao.org
3. 安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
4. 注意：安装完后最好查看其版本号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文件