gulp使用配置(无障碍)windows

       最近考虑到项目中要用到gulp，所以自己就想先来试试水，虽然这个早就不是什么特别的东西了，但是真正想去学习使用直到用到自己的项目的中，这个过程还是有些困难的。而且网上的教程都基本千篇一律，都没有从根本说明一些问题，遇到坑还是会在那里。大部分教程都会出现这个情况，把一些细节给跳过去了，但是往往这些步骤是至关重要的，所以导致很多人无法快速上手，甚至想放弃研究的打算。下面就是个人整理学习gulp的一些过程，不敢说是最细最好的，但是求不坑，遇到的问题都会说明，废话就多说了，现在开始（下面都是基于windows版本的）：

Gulp是干嘛的我就不多说了，不知道的请出门左拐百度去。要用到gulp，必须要说下node，因为它是依赖node平台的。

第一步：要把你的node升级到最新稳定版本，npm也是，具体升级方法是：

Node 版本更新，下载指定版本 .msi 文件，安装到历史安装目录，即完成版本更新，当然你也可以下载面安装版，直接到你之前的安装目录替换之前的文件和文件夹就行了（亲测是可以的）。

npm版本更新：npm -g install npm ( 最新稳定版 )或 npm -g install npm@2.9.1 ( 指定版本 )

不然等你用到gulp插件的时候会出现问题，有些插件依赖的node版本比较高，把这些做好了也省去后来的麻烦，也为你填了一个坑，因为你版本低的话肯定会遇到莫名奇怪的问题；

下面就是正式gulp相关的了，开始：

1.先进行全局安装，指令是：npm install -g gulp

2.在项目目录下新建package.json和gulpfile.js两个文件，这个说明下，package.json是项目要到的一些配置，比如npm版本，node版本，以及需要哪些gulp插件等等；gulpfile.js文件就完全是配置gulp在你的项目中具体怎么使用，比如你用用到js压缩，那你就在里面引用gulp-uglify，然后再配置自动化压缩的任务，下面具体说说：

package.json文件基本配置如下：

{
  "name": "autopractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "author": "",
  "license": {
    "type": "MIT",
    "url": ""
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "devDependencies": {
    "browser-sync": "^2.10.1",
    "coffee-script": "^1.10.0",
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.1",
    "gulp-coffee": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^2.3.1",
    "gulp-jade": "^1.1.0",
    "gulp-jshint": "^2.0.0",
    "gulp-less": "^3.0.5",
    "gulp-ruby-sass": "^2.1.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.2",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.5.1",
    "gulp-webpack": "^1.5.0",
    "gulp-htmlmin": "^2.0.0",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-imagemin": "^3.0.0",
    "gulp-notify": "^2.0.0",
    "jade": "^1.11.0",
    "jshint": "^2.8.0"
  },
  "dependencies": {}
}

gulpfile.js配置如下(可按需引入)：

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    less = require('gulp-less'),
    htmlmin = require('gulp-htmlmin'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    livereload = require('gulp-livereload');

然后是基本任务，如下：

// 将所有js文件连接为一个文件main.min.js并压缩，存到app_compress/js目录下
gulp.task('concatJs', function() {
    gulp.src(['app/js/*.js'])
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('app_compress/js'));
});
//压缩js
gulp.task('uglifyjs', function() {
    gulp.src(['app/js/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('app_compress/js'));
});
//压缩css
gulp.task('mincss', function() {
    gulp.src(['app/css/*.css'])
        .pipe(minifycss())
        .pipe(gulp.dest('app_compress/css'));
});
//压缩html
gulp.task('minhtml', function() {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src(['app/*.html'])
        .pipe(htmlmin(options))
        .pipe(gulp.dest('app_compress'));
});
// 图片压缩
gulp.task('imgmin', function() {
    gulp.src(['app/img/*'])
        .pipe(imagemin())
        .pipe(gulp.dest('app_compress/img'));
});
//组合任务
gulp.task('default', ['mincss','minhtml']);

3.再要切到你的项目目录，给本项目安装gulp，指令是：npm install --save-dev gulp

注意：除此安装依赖插件时，在package.json所在目录执行npm install，devDependencies里面的模块都会被安装的。如果还有没写入package.json里面的依赖，用开发模式的安装方法，就会自动写入devDependencies中。

以上只是一些最基本的配置和使用，gulp更多功能参考官网：gulp中文网