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任务。
