手把手教你gulp

gulp作用：

1. Sass编译
2. Css Js 图片压缩
3. Css Js 合并
4. Css Js 内联
5. Html的include功能
6. Autoprefixer
7. 自动刷新
8. 去缓存
9. Handlebars模板文件的预编译
10. 雪碧图
11. ESLint rem移动端适配方案

---

安装nodejs

1.下载链接：https://nodejs.org/en/download/
2.安装
3. node -v 查看node的版本号
4. npm -v 查看npm的版本号

---

全局安装gulp命令行工具

安装：npm install -g gulp

gulp -v 查看gulp的版本号

---

选装cnpm

说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。32个！来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”；

安装：命令提示符执行npm install cnpm -g
–registry=https://registry.npm.taobao.org；

cnpm -v 查看gulp的版本号

---

生成package.json文件

生成文件：命令提示符执行npm init

在指定目录下会生成一个package.json的文件（cmd中输入：package.json）、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

{
"name": "test",   //项目名称（必须）
"version": "1.0.0",   //项目版本（必须）
"description": "This is for study gulp project !",   //项目描述（必须）
"homepage": "",   //项目主页
"repository": {    //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
  },
"author": {    //项目作者信息
"name": "surging",
"email": "[e-mail]"
  },
"license": "ISC",    //项目许可协议
"devDependencies": {    //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
  }
}

---

在项目下安装gulp：

进入项目目录： cd E:\demo\gulp
安装：npm install –save-dev gulp（或者 npm install –save-dev gulp gulp-uglify）

PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

---

在项目根目录下新建 gulpfile.js文件（重要 ）

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

它大概是这样一个js文件：

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    concat = require('gulp-concat'),//合并文件 --合并只是放一起--压缩才会真正合并相同样式
    less = require('gulp-less'),//编译less文件
    cssmin = require('gulp-minify-css'),//压缩css文件
    rename = require('gulp-rename'),//设置压缩后的文件名
    autoprefixer = require('gulp-autoprefixer'),//给 CSS 增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况
    imagemin = require('gulp-imagemin'),  //图片压缩
    spriter=require('gulp-css-spriter');//合并图片

//编译less文件 定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});

//压缩css文件
gulp.task('minifycss', function() {
    gulp.src('src/css/index.css')      //压缩的文件
        .pipe(cssmin())   //执行压缩
        .pipe(gulp.dest('src/cssmin'))   //输出文件夹
});

gulp.task('default',['testLess','minifycss'],function(){//定义默认任务 先执行testLess和minifycss 再执行console.log('hello world');
    console.log('hello world');
}); 

//gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

安装需要的模块，如下图

---

运行

当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’minifycss’]。

成功将src/less下的index.less编译成src/css下的index.css和压缩成src/cssmin下的index.css