gulp（基础篇）

　　今天在写项目的时候用到了gulp构建工具，虽然一年前就有用过，但是一直只存在于我的“有道云笔记”里，今天又一次用到，固然是巩固一下，这里来记录一下吧：这里我主要想要记录的就是初学者在第一次使用gulp该如何操作，关于gulp的概念以及相关介绍，我这里就不一一描述了，在以后的文章里我会再补过来......

---

总的流程：安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

第一步你需要安装nodejs：（gulp是基于nodejs，理所当然需要安装nodejs）

打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（推荐 TLS 版）。然后按步骤正常安装即可（安装路径随意）。

第二步：命令行操作：（以下都是在windows系统下进行的）

简单介绍gulp在使用过程中常用命令，打开命令提示符执行下列命令（打开方式：window + r 输入cmd回车）：

node -v  查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。（PS：未能出现版本号，请尝试注销电脑重试）
npm -v   查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。
cd       定位到目录，用法：cd + 路径 ；
dir      列出文件列表；
cls      清空命令提示符窗口内容。

在命令行中进行如下图操作，看到相应的数据显示即为安装成功：

第三步：选装cnpm （国内到 npm 服务器的连接很不稳定，如果你有V了个PN大可不必担心，那么你可以忽略这一步）

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

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

第四步：全局安装gulp

说明：全局安装gulp目的是为了通过她执行gulp任务；
安装：命令提示符执行 cnpm install gulp -g
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

第五步：新建package.json文件
说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；可以在项目上使用 npm init 配置，推荐直接新建并写入初始内容：（注意：json文件内是不能写注释的，复制下列内容请删除注释）

{
  "name": "wap",        //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",       //项目主页
  "repository": {       //项目资源库
    "type": "git",
    "url": "github.com"
  },
  "author": {           //项目作者信息
    "name": "xiangjun",
    "email": "1289431084@qq.com"
  },
  "license": "ISC",       //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11"
  }
}

这里是我建立的目录：

它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

{
  "name": "fenhongshop_wap",   //项目名称（必须）
  "version": "1.0.0",          //项目版本（必须）
  "description": "a shopping wap",     //项目描述（必须）
  "author": {        //项目作者信息
    "name": "xiangruding",
    "email": "1289431084@qq.com"
  },
  "license": "ISC",  //项目许可协议
  "devDependencies": {  //项目依赖的插件
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^0.4.6",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-html-minifier": "^0.1.8",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-jasmine": "^2.2.1",
    "gulp-jshint": "^2.0.4",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.0.0",
    "gulp-rev-collector": "^1.0.2",
    "gulp-rimraf": "^0.2.0",
    "gulp-ruby-sass": "^2.1.1",
    "gulp-uglify": "^1.5.4",
    "gulp-util": "^3.0.7",
    "imagemin-pngcrush": "^4.1.0",
    "jshint": "^2.9.4"
  }
}

再次提醒：package.json是一个普通json文件，所以不能添加任何注释。

对于完整的 package.json (如上), 只需对整个项目执行 npm install 即可安装 package.json 文件中声明的所有插件模块。

第六步：本地安装gulp插件（给项目目录安装 gulp以及gulp插件）

给项目目录安装gulp：cnpm install gulp --save-dev

—save-dev 这个参数会将插件信息自动更新到 package.json 里，其中的 devDependencies 属性会随插件依赖的安装卸载而改变。

PS. Windows 7及以上，按住 Shift 再右键，选择在此处打开命令窗口。免去 cd 命令定位目录的繁琐。

-----------------------------------------------------------------------------------------

或者分为如下两个部分执行也是可行的：

1、先执行：定位目录命令提示符执行 cnpm install gulp -g

说明：我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

2、后执行：定位目录命令后提示符执行cnpm install --save-dev

=======================================================

3、之后安装gulp插件：举例：gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）

命令：cnpm install gulp-imagemin --save-dev

如上图，有显示蓝色的√√就说明插件安装成功！

当然你也可以直接执行如下命令实现全部安装：(这里只是把所有的插件都汇总写在一块了，当然你也可以向上边举例的那样单独安装插件，需要什么插件安装什么插件)

cnpm install gulp del gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-ruby-sass gulp-rev-append gulp-cssnano gulp-replace gulp-imagemin browser-sync gulp-font-spider gulp-file-include gulp-autoprefixer --save-dev

关于其他更多插件配置只需要查看一下这里

以上两个安装操作（给项目目录安装 gulp以及gulp插件）将会在项目目录下生成 node_modules 文件夹，相应的插件都在这里。

（Windows 用户请注意，此文件夹可能 无法删除 无法复制 无法移动，会出现诸如“包含名称过长且无法放入回收站”，“源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置” 等等问题。使用一个简单的方式即可删除，使用 WinRAR “添加到压缩文件”，勾选压缩选项里的 “压缩后删除源文件” ，确定之后即可删除。）

第七步：gulpfile.js文件

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

这里是我的目录列表：

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

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    pngcrush = require('imagemin-pngcrush'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    htmlmin1 = require('gulp-htmlmin'),
    htmlmin = require('gulp-html-minifier'),
    rename = require('gulp-rename'),
    clean = require('gulp-rimraf'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    jasmine = require('gulp-jasmine'),
    del = require('del'),
    gulpUtil = require('gulp-util');

/********************HTML*************************/
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeEmptyAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,
        minifyCSS: true
    };
    gulp.src('html/*.html')
        .pipe(htmlmin1(options))
        .pipe(gulp.dest('dist/html'))
        .pipe(notify({ message: 'testHtmlmin task complete' }));
});

/********************CSS*************************/
gulp.task('styles', function() {
return gulp.src('css/*.css')
 .pipe(gulp.dest('dist/css'))
 .pipe(minifycss())
 .pipe(gulp.dest('dist/css'))
 .pipe(notify({ message: 'styles task complete' }));
});
/********************javascript*************************/
gulp.task('scripts', function() {
return gulp.src('js/*.js')
 // .pipe(jshint('.jshintrc'))
 // .pipe(jshint.reporter('default'))
 .pipe(concat('main.js'))
 .pipe(gulp.dest('dist/js'))
 // .pipe(rename({suffix: '.min'}))
 .pipe(uglify())
 .pipe(gulp.dest('dist/js'))
 .pipe(notify({ message: 'Scripts task complete' }));
})
/********************images*************************/
gulp.task('images', function() {
return gulp.src('img/*')
 .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
 .pipe(gulp.dest('dist/img'))
 .pipe(notify({ message: 'Images task complete' }));
});
/********************clean*************************/
gulp.task('clean', function() {
return gulp.src(['dist/html', 'dist/css', 'dist/js', 'dist/img'], {read: false})
 .pipe(clean());
});
/**************************HTML****************************/
//watch
gulp.task('watch', function() {
    // 看守所有.html档
    gulp.watch('html/*.html', ['testHtmlmin']);

     // 看守所有.css档
     gulp.watch('css/*.css', ['styles']);
     // 看守所有.js档
     gulp.watch('js/*.js', ['scripts']);
     // 看守所有图片档
     gulp.watch('img/*', ['images']);
});

/**
 * 默认执行
 */
gulp.task('default', ['clean'], function() {
 gulp.start('testHtmlmin','styles', 'scripts', 'images');
});

更多关于gulpfile.js中的函数解释，请参考gulp API 文档

第八步：运行gulp

说明：命令提示符执行gulp 任务名称；
编译：定位到目录执行gulp编译所用任务：（执行gulp default和gulp的作用是一样的，都会调用default任务里的所有任务）

总结
　　1、安装nodejs；
　　2、新建package.json文件；
　　3、全局和本地安装gulp；
　　4、安装gulp插件；
　　5、新建gulpfile.js文件；
　　6、通过命令提示符运行gulp任务。