初识gulp

之前一段时间学习使用了gulp自动化构建工具，并在现在使用的项目上部署使用，同时在这做个笔记进行小结，以便加深记忆，如有理解错误的地方请不吝赐教

gulp 的解释我就不多说了 这里引用官网的一句话 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务，提高开发效率

在这我多使用gulp进行JS压缩，css压缩，同时其还能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤，下面我就不多说了直接上手如何使用gulp

1.首先当然是要安装一个node,gulp是具于node的所以这是最基础的一步

你可以去node官网下载一个版本node安装，链接http://nodejs.cn/（这里我使用的node均在window系统下）；

2.使用命令行进行gulp安装下载，

1）.这里就稍微记录下node下常用的一点命令行

node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。

npm -v查看npm的版本号，npm nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。

cd定位到目录，用法：cd + 路径 ；

dir列出文件列表；

cls清空命令提示符窗口内容。

2）安装gulp

2.1.首先全局安装gulp，目的通过其执行gulp任务，安装命令为：（npm install gulp -g）,查看是否安装成功（gulp -v）出现版本号即为成功;

2.2.新建一个package.json文件，当然你也可以使用（npm init）来创建一个package.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": "xxx",
    "email": "[email protected]"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}<br />

2.3.在使用的目录下安装gulp(npm install --save-dev gulp)，

2.4.在项目的根目录新建一个gulpfile.js文件

var gulp = require('gulp');
 gulp.task('gulps', () => {
     return //需要执行的代码
 });
 
 然后在cmd中使用 gulp gulps  执行

3.一些api解释

var gulp = require('gulp');
 var cleanCSS = require('gulp-clean-css');
 var minJs = require('gulp-uglify');
 var rev = require('gulp-rev') ;
 var rename = require('gulp-rename');//重名名
 
 示例压缩css,
     /*task 定义一个gulp任务，含三个个参数，
            第一个参数为任务名，必填；
            第二个参数为依赖的任务，选填，
            第三个为回调函数里面执行的是必要的插件操作，必填
      src 为指定文件路径，可使用正则匹配
      dest 指定输出位置，
     */
 gulp.task('total-css', () => {
     return gulp.src('Public/static/css/home/newKdBeiFen/*.css')
         .pipe(rename({suffix:'.min'}))
         .pipe(cleanCSS({ compatibility: 'ie8' }))
         .pipe(gulp.dest('Public/static/css/home/monicss/'));
 });        
 /*watch用于监听文件发生变化，文件发生改变就会执行该处指定的任务*/
 gulp.task('watch',function(){
     gulp.watch('Public/static/css/home/newKdBeiFen/*.css',['total-css']);
 })

3.下面记录的均为gulp 的常用插件安装以下使用均为（npm install 插件名 --save-dev）

gulp-load-plugins：自动加载 package.json 中的 gulp 插件，避免一个个require插

gulp-rename： 重命名

gulp-uglify：文件压缩

gulp-concat：文件合并

gulp-less：编译 less

gulp-clean-css：压缩 CSS 文件

gulp-htmlmin：压缩 HTML 文件

gulp-babel: 使用 babel 编译 JS 文件

gulp-jshint：jshint 检查

gulp-rev：添加时间戳

gulp-imagemin：压缩jpg、png、gif等图片

gulp-livereload：当代码变化时，它可以帮我们自动刷新页面，除在模块中需要安装外，还需要在浏览器中安装。