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：

安装：npm install –save-dev gulp

点击查看大图

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

点击查看大图

---

项目中的配置

var gulp = require("gulp"),    cssmini = require('gulp-minify-css'),     //压缩css文件    uglify = require("gulp-uglify"),          //压缩js文件    htmlmini = require('gulp-minify-html'),   //压缩html文件    imagemin = require('gulp-tinypng-nokey'), //压缩图片    replace = require('gulp-replace'),    htmlreplace = require('gulp-html-replace'),    header = require('gulp-header'),    rev = require("gulp-rev"),    revCollector = require('gulp-rev-collector'),    runSequence = require('run-sequence');/******************************** 压缩js文件 begin ********************************/gulp.task('compress_js_public',function(){    return gulp.src(['redbaby/public/js/*.js','!redbaby/public/js/*.min.js'])   //获取.js文件，同时过滤掉.min.js文件        .pipe(uglify({preserveComments:'some'}))    // 使用uglify进行压缩，并保留部分注释        .pipe(gulp.dest('redbaby_testing/public/js'))});gulp.task('compress_js_red',function(){    return gulp.src(['redbaby/public/js/redbaby/*.js','!redbaby/public/js/redbaby/*.min.js'])           .pipe(uglify({preserveComments:'some'}))            .pipe(gulp.dest('redbaby_testing/public/js/redbaby'))});/******************************** 压缩js文件 end ********************************//******************************** 压缩css文件 begin ********************************/gulp.task('compress_css_public', function() {    return gulp.src(['redbaby/public/css/*.css','!redbaby/public/css/*.min.css'])        .pipe(cssmini())        .pipe(gulp.dest('redbaby_testing/public/css'))});gulp.task('compress_css_red', function() {    return gulp.src(['redbaby/public/css/redbaby/*.css','!redbaby/public/css/redbaby/*.min.css'])        .pipe(cssmini())        .pipe(gulp.dest('redbaby_testing/public/css/redbaby'))});/******************************** 压缩css文件 end ********************************//******************************** 压缩html文件 begin ********************************/gulp.task('compress_html_abnormal', function() {    return gulp.src('redbaby/templates/abnormal/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/abnormal'))});gulp.task('compress_html_device', function() {    return gulp.src('redbaby/templates/device/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/device'))});gulp.task('compress_html_home', function() {    return gulp.src('redbaby/templates/home/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/home'))});gulp.task('compress_html_index', function() {    return gulp.src('redbaby/templates/index/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/index'))});gulp.task('compress_html_login', function() {    return gulp.src('redbaby/templates/login/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/login'))});gulp.task('compress_html_operator', function() {    return gulp.src('redbaby/templates/operator/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/operator'))});gulp.task('compress_html_place', function() {    return gulp.src('redbaby/templates/place/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/place'))});gulp.task('compress_html_refund', function() {    return gulp.src('redbaby/templates/refund/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/refund'))});gulp.task('compress_html_repair', function() {    return gulp.src('redbaby/templates/repair/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/repair'))});gulp.task('compress_html_role', function() {    return gulp.src('redbaby/templates/role/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/role'))});gulp.task('compress_html_salesman', function() {    return gulp.src('redbaby/templates/salesman/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/salesman'))});gulp.task('compress_html_user', function() {    return gulp.src('redbaby/templates/user/*.html')        .pipe(htmlmini())        .pipe(gulp.dest('redbaby_testing/templates/user'))});/******************************** 压缩html文件 end ********************************///图片压缩gulp.task('compress_img', function () {          gulp.src('redbaby/public/images/redbaby/*.{png,jpg,jpeg,gif,ico}')        .pipe(imagemin())        .pipe(gulp.dest('redbaby_testing/public/images/redbaby'));});gulp.task('build', function (done) {    condition = false;    runSequence(        'compress_js_public',            'compress_js_red',          'compress_css_public',        'compress_css_red',        // 'compress_img',        'compress_html_abnormal',        'compress_html_device',        'compress_html_home',        'compress_html_index',        'compress_html_login',        'compress_html_operator',        'compress_html_place',        'compress_html_refund',        'compress_html_repair',        'compress_html_role',        'compress_html_salesman',        'compress_html_user',        // 'gulptest',        // 'html_replace',    done);});