gulp前端自动化构建工具

前端构建工具本人 bootstrap+jquery用gulp

                             vue+element 用webpack

引文

现在，移动端开发的火爆，以及前端工程越来越复杂，所以出了很多的自动化构建工具。gulp等就是最好的代表，如果你是前端新手初次接触gulp，又不想看太官方的解释又想学习学习gulp的相关知识的话那么这篇文章很适合你，喜欢的话也希望你们可以点个赞，不喜欢的也不要喷，毕竟我也不是前端大牛，只是想把自己使用gulp的一些经验，心得分享和给一些需要的人

1.gulp到底是什么玩意？

很多去百度的人都会得到这样一个答案，那就是自动化构建工具，那么何为自动化构建工具？
其实说的简单点就是一个工具，而这个工具起到的作用如下图所示

大家现在看到的这个图片是我使用gulp的一个基本的项目结构，而这边的src文件就是我们的源文件，dist是通过gulp编译过后的文件（稍后会详细说明每一个文件的作用）

现在请大家思考这样一个问题

1. 倘若我让线上的网站（不论PC还是移动端）使用的css文件，JS文件，images文件等静态资源，JS是压缩过的，css是压缩过的，images（主要针对雪碧图）也是压缩过的，好来减少文件的大小，从而提升一下浏览器的性能，那么应该怎么办？

2. 如果说我们在项目中使用LESS，或者SASS作为CSS的预编译语言（浏览器本身是不支持LESS,SASS文件的，难道每次还要使用类似与考拉软件去处理这些吗？）

3. 如果我想找一个东西帮我去处理上面的这些东西，我写的还是没有压缩的JS或者CSS/less/sass等，但是在页面上实际上运行（或者等到项目发布的时候替换为压缩过的文件），那么gulp就是你很好的选择。

那么现在这样说大家有没有明白gulp是干嘛的吗？不错，它就是来处理上述这些事情的，而且我们在编辑器里修改的代码都是在src的目录下，而dist文件目录就是经过上述处理过后的文件目录，江湖人称编译过后的文件目录，而gulp就是起到了这个桥梁的作用

2.gulp的相关介绍

1. 首先希望大家明白一点，gulp是基于node.js的工具，如果你的电脑上没有node.js那么你是无法跑起来gulp的。（在此大家只需要在官网下载一下node.js然后基本下一步下一步这种傻瓜式的安装就可以了，具体请百度，因为很简单，在此不过多介绍）

2. 使用gulp需要你会基本的几个cmd窗口命令，比如进入某个盘（C,D,E），或者某一个文件夹的命令，准备好这些了之后，那么就准备开始撸起来吧！

3.npm和cnpm的区别

1. 什么是npm?其实这个问题不难解答，这是一个基于node.js的包管理工具，说的通俗一点就是，我们可以通过npm这个工具去下载我们想要的包，这些包就是我们在后面需要的各种各样的插件（比如压缩JS代码的插件，压缩CSS代码的插件），这些都是通过npm这样一个工具下载到我们的电脑里面的。

2. 什么是cnpm?在国内，都会有这样一个问题，我们想访问国外的一个网站大多都很慢，那么npm和node.js都是老外搞出来的，那么势必也面临这样一个问题，就是我们通过npm下载东西的时候会很慢，而cnpm就是这样的一个解决工具。cnpm是阿里巴巴出的，它会自动和npm官方同步，但是我们在国内却下载的很快，从而解决必须要翻墙这样的一种局面。

3. 如何安装cnpm?请在cmd窗口命令下输入

4. npm install -g cnpm --registry=https://registry.npm.taobao.org

    然后直接回车，等待成功即可,详情参考CNPM

4.如何安装gulp?

在此我们假定各位已经安装了node.js和cnpm

1. A:在cmd窗口下输入cnpm install --global gulp然后回车等待安装即可（注意：在gulp中文网上是写npm install --global gulp这样的命令，但是我们已经安装了cnpm,所以我们可以用cnpm来代替npm,所以命令将改为cnpm install --global gulp）,可以参考gulp中文网
   B:想检测是否安装成功可以在cmd窗口下输入gulp -v命令，只要有version（版本好出来就证明是OK的）如果所示

2. 

3. 到此为之gulp的安装就已经结束了。

5.相关配置文件说明

如图dist和src文件已经在前面介绍过了他们的职责，在此我们重点介绍package.json文件和gulpfile.js文件的作用。

1. package.json文件。它就是记录了我们使用了什么插件，以及版本号的记录的一个json文件而已

2. "author": "",
     "license": "ISC",
     "devDependencies": {
       "gulp": "^3.9.1",
       "gulp-autoprefixer": "^3.1.0",
       "gulp-concat": "^2.6.0",
       "gulp-imagemin": "^3.0.1",
       "gulp-jshint": "^2.0.1",
       "gulp-less": "^3.1.0", //例如这是处理LESS文件的，将LESS编译成.css文件
       "gulp-minify-css": "^1.2.4",
       "gulp-notify": "^2.2.0",
       "gulp-rename": "^1.2.2",
       "gulp-uglify": "^1.5.4",
       "gulp-watch": "^4.3.8"
       //这是我的package.json的部分文件内容
       //大家应该很很明白他的作用了吧

gulpfile.js文件（这是大家学习gulp的重点）

1. 它就是告诉了gulp我们要将什么文件编译到什么文件下的XXX目录里面。例如在我的src目录里面存在一个css文件夹，里面装了很多css或者LESS等样式文件，我现在想通过gulp将它编译到dist目录下面的css文件夹里面并且这个css文件夹里的样式文件还是压缩过了。那么gulpfile.js就是起到了这样的一个作用。

2. //下面我将自己的gulpfile.js文件的内容给你大家做做案例
   var gulp=require('gulp'); //基础库
   var less=require('gulp-less'); //编译less工具
   var concat=require('gulp-concat'); //文件合并
   var uglify=require('gulp-uglify');//压缩JS文件
   //首先require的意思就是从你的电脑里面加载某一个gulp的插件，例如require('gulp-less')
   //请注意：加载这些插件需要你的电脑已经安装了这些插件，详情请百度，很简单也就是CMD两行命令的事情而已。
   
   //配置文件路径
   var paths={
       src_html:"./src/**/*.html",  //src_变量开头的是源文件的文件目录
       src_less:"./src/css/**/*.less", //less文件
       src_css:"./src/css/**/*.css",  //css文件
       src_json:"./src/**/*.json",   //json格式的文件
       src_images:"src/images/**/*", 
       src_pic:"src/pic/**/*", //它的意思是src文件下pic文件里面的所有格式的文件
       src_js:"./src/js/**/*.js",
       src_text:"./src/**/*.text",
   
       dist:"./dist",    //dist_变量开头的都是编译过后的文件目录
       dist_css:"./dist/css",   //dist文件夹下的css文件
       dist_mincss:"./dist/mincss", //dist文件夹下的mincss文件
       dist_images:"dist/images",
       dist_html:"./dist/**/*.html",
       dist_pic:"dist/pic",
       dist_js:"./dist/js",
       dist_minjs:"./dist/minjs"
   }
   //style任务
   gulp.task('styles',function(){ //gulp.task就是告诉gulp要编译什么东西，并且使用什么样的处理方式，比如我这边就是编译less文件
       gulp.src([paths.src_less])
       .pipe(less())
       
       //然后输出编译文件到指定文件夹
       .pipe(gulp.dest(paths.dist_css))
   });
   
   
   // HTML任务
   gulp.task('html', function() {  //编译html文件
       return gulp.src([paths.src_html,paths.src_json,paths.src_text])
       .pipe(gulp.dest(paths.dist))//输出到指定文件夹
       //提醒任务完成
       .pipe(notify({ message: 'html,json,text is OK' }))
   });
   gulp.task('scripts',function(){  //编译js文件内容，诸如此类，你也可以创建其他的任务，比如images
       return gulp.src([paths.src_js])
       .pipe(gulp.dest(paths.dist_js)) //输出到指定文件夹
       .pipe(notify({ message: 'Scripts is OK' })) //提醒任务完成
   });

大功告成，准备启动gulp

1. 首先我们陷进去项目文件，就是src,dist的父集文件

2. 然后如入命令 cnpm install 初始化node_models模块（没有安装的node模块的话会根据package.json文件去下载相应的node模块放在node_models文件内，我们不用去这个文件夹）

3. 然后cmd中输入gulp watch就是监听的意思，然后就OK了

4. 

5. 如图所示，就OK了，现在你在src文件目录中修改了什么文件，就会编译到dist文件中，gulp有很多的好处，比如处理CSS预编译语言，压缩，或者将ES6编译成ES5都是很好的。