404 Not Found
The requested URL /q/8039/ was not found on this server.gulp的安装教程，使用教程，和简单的自动化任务教程
系统：win10
终端工具：cmder（或使用系统终端：win+R -& 输入cmd -& 回车）
gulp官网地址：
gulp中文文档：
gulp插件地址：
gulpAPI地址：
1.安装node
window下，下载node安装即可。
node下载地址：
安装比较简单，基本一直下一步即可，安装路径随意。
安装完成后，终端输入如下命令 显示版本号即安装成功。
2.推荐安装 cnpm
npm服务器在国外，网络影响大，甚至还会遇到需要翻墙才能下载插件的情况，因此推荐安装cnpm。
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。后面的演示均使用cnpm 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。后面的演示均使用cnpm 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。后面的演示均使用cnpm 重要的事情说三遍
【淘宝npm镜像，这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步】。
镜像地址：
2.1安装cnpm
执行 npm install cnpm -g --registry=https://registry.npm.taobao.org
2.2检测cnpm是否安装成功
执行cnpm -v 显示版本号即安装成功
3.全局安装gulp
3.1 全局安装gulp
执行cnpm install gulp -g
3.2检测gulp是否安装成功
执行gulp -v 显示版本号即安装成功
4.项目文件根目录新建package.json
注：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件重点内容
4.1进入你的项目文件
示例：进入 D:/WWW/test 项目文件夹中
4.2新建package.json
执行命令cnpm init
4.3检测package.json是否成功新建
查看项目文件根目录，是否新建package.json，且内容是否和你终端中输入的一致。
package.json内容如下：
"name": "test",
"version": "1.0.0",
"description": "我是描述",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"author": "",
"license": "ISC"
123456789101112123456789101112
注：可不使用cnpm init方式，可选择手动创建package.json配置文件
5.本地安装gulp插件
5.1本地安装gulp
注：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能
进入你的项目文件路径中后，执行cnpm install gulp --save-dev
注：项目文件中多了 node_modules 文件夹，里面是你本地安装的插件
5.2安装gulp-sass插件
进入你的项目文件路径中后，执行cnpm install gulp-sass --save-dev
6.新建gulpfile.js（重要，重要，重要）
gulpfile.js是gulp的配置文件，放于根目录中。
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass',function(){
return gulp.src('src/css/test.scss')
.pipe( sass() )
.pipe( gulp.dest('src/css') );
gulp.task('default',['sass','watch1']);
gulp.task('watch1',function(){
return gulp.watch('src/css/test.scss',['sass']);
});123456789101112131415161718192021123456789101112131415161718192021
详细gulp api介绍，可参考官网：
7.运行gulp
7.1 执行gulp 任务名称 运行该任务
示例：gulp sass 执行gulpfile.js中的sass任务
7.2 执行gulp 调用default中的所有任务
如图：开启监听事件，当 src/css/test.scss 发生修改时，会自动执行sass任务。
8.常用插件
sass的编译（gulp-sass）less编译 （gulp-less）重命名（gulp-rename）图片转换为base64-encoded （gulp-img64）自动添加css前缀（gulp-autoprefixer）压缩css（gulp-clean-css）js代码校验（gulp-jshint）合并js文件（gulp-concat）压缩js代码（gulp-uglify）压缩图片（gulp-imagemin）自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）图片缓存，只有图片替换了才压缩（gulp-cache）更改提醒（gulp-notify）阻止 gulp 插件发生错误导致进程退出并输出错误日志(gulp-plumber)
9.关于匹配
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：
*匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。? 匹配文件路径中的一个字符(不会匹配路径分隔符)[...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法!(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?+(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+*(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*@(pattern|pattern|pattern) 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)
下面以一系列例子来加深理解
*能匹配 a.js,x.y，abc，abc/，但不能匹配a/b.js*.*能匹配 a.js，style.css，a.b，x.y*/*/*.js 能匹配 a/b/c.js，x/y/z.js，不能匹配a/b.js，a/b/c/d.js** 能匹配 abc，a/b.js，a/b/c.js，x/y/z，x/y/z/a.b，能用来匹配所有的目录和文件**/*.js 能匹配 foo.js，a/foo.js，a/b/foo.js，a/b/c/foo.jsa/**/z 能匹配 a/z，a/b/z，a/b/c/z，a/d/g/h/j/k/za/**b/z 能匹配 a/b/z，a/sb/z，但不能匹配a/x/sb/z，因为只有单**单独出现才能匹配多级目录?.js 能匹配 a.js，b.js，c.jsa?? 能匹配 a.b，abc，但不能匹配ab/，因为它不会匹配路径分隔符[xyz].js 只能匹配 x.js，y.js，z.js，不会匹配xy.js，xyz.js等，整个中括号只代表一个字符[^xyz].js 能匹配 a.js，b.js，c.js等，不能匹配x.js，y.js，z.js
当有多种匹配模式时可以使用数组
//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])11
使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式
gulp.src([*.js,'!b*.js'])
gulp.src(['!b*.js',*.js]) 1212
此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：
a{b,c}d 会展开为 abd，acda{b,}c 会展开为 abc，aca{0..3}d 会展开为 a0d，a1d，a2d，a3da{b,c{d,e}f}g 会展开为 abg，acdfg，acefga{b,c}d{e,f}g 会展开为 abdeg，acdeg，abdeg，abdfg
10.结束，参考文章
本文参考借鉴多篇文章 在 加上自己的实际后，写了这篇文章。
如有不妥之处和疑问的地方，请留言赐教，谢谢。
关于gulp的介绍，可参考官网：
gulp官网地址：
gulp中文文档：
gulp插件地址：
gulpAPI地址：
本文还参考了文章：
本文初衷仅是喜欢和分享，不作其他用途，参考借鉴之处如有侵权请联系删除。
没有更多推荐了，Tomcat 安装
环境： win10-64位 &apache-tomcat-7.0.57-windows-x64 &&
首先要配置Windows 的环境变量 JAVA_HOME(就是Java的环境变量)
tomcat 解压后是绿色文件，可以直接运行 找到bin 目录下 Windows 下直接点击startup 在Linux下 在目录下输入 ./startup.sh(window下 的git 版本也可以使用这个命令)
关闭就是shutdown 启动后直接在浏览器输入 &http://localhost:8080/
在eclipse 下安装tomcat 插件 &和一般插件安装一样的，直接放到在plugins，或者建立一个.links 文件。&
插件安装好以后，在eclipse 可以看到tomcat &，配置路径 &
新建项目一个项目----创建一个webapps文件夹---在webapps文件下创建WEB-INF文件夹----在WEB-INF下创建classes文件（用来存放源文件），lib 文件夹（导入servlet-api.jar）和web.xml
在webapps的下创建html文件
把项目源文件放到classes 里面
在lib 里导入&servlet-api.jar（在这里面复制，粘贴） 然后再添加到配置路径里面
复制xml &，配置web.xml
配置下文路径，在server.xml &里面配置（上下文路径是随便取的）
&最终结构是这样的：
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
用npm装cnpm后，查看cnpm -v没有显示出版本号 而是一堆文字gulp批量下载依赖包cnpm install然后gulp启动总是提示缺失某个模块（package.json和gulpfile.js没什么问题）求解
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
报什么错，你要上图啊兄弟。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
看了你的评论，里面有 gulp-sass 模块， gulp-sass 模块依赖 node-sass 这个模块因为国内的原因，可能会导致下载不完整，可以使用淘宝镜像。
如果你的 npm 版本是 4 及以下的话，执行
rm -rf node_modules
npm cache clean
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install --registry https://registry.npm.taobao.org
如果升级了 npm@5 的话，中间的清除 cache 的那一步变成
npm cache --force clean
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
项目里已经安装了gulp，启动服务，可以访问静态文件html，但是很多接口调用，想用json-server模拟接口，但是我想把这两个功能同时启动，或者把json-server集成到gulp中，或者能够同时启动这两个服务，并且在同一个端口下，这个是重点，必须是同一个端口，不然接口调用就跨域了。该如何操作呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不知道你的静态服务器用的什么，这里推荐用 browserSync。
像你这种情况就可以加个中间件来代理接口。
var browserSync = require('browser-sync')
var proxy = require('http-proxy-middleware')
// 需要安装这个中间件
gulp.task('dev', function() {
browserSync.init({
baseDir: '/',
middleware: proxy('/api', {
target: 'http://127.0.0.1:4000',
// 这里是你要代理的接口
changeOrigin: true,
logLevel: 'debug',
pathRewrite: {
'^/api': ''
port: 3000
假如你原本有一个接口地址为 http://127.0.0.1:4000/login，现在直接请求 /api/login 就可以了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
同一个端口，肯定不行。
给你一个方案 用 http-proxy-middleware 加代理，在gulp中 child_process 起一个进程去跑 json-server, 下面代码是实际项目中的代码片段
var proxyMiddleware = require('http-proxy-middleware');
var child = require('child_process');
gulp.task('dev:browser-sync', function(){
//add proxy for gui
var middleware = proxyMiddleware(['/user', '/persons'], {target: 'http://localhost:9001', changeOrigin: true});
browserSync({
baseDir: './',
index: 'build/login.html',
middleware: middleware
gulp.task('dev:copy', ['dev:copy-html', 'dev:copy-conf', 'dev:copy-login', 'dev:copy-data']);
gulp.task('dev', 'Run this for developing', ['dev:index', 'dev:copy', 'dev:browser-sync', 'dev:watch-files'], function(){
//json-server --watch server/db.json
--port 9001
var jsonServer = child.spawn('node_modules/json-server/bin/index.js', ['--watch', 'server/db.json', '--port', '9001']);
jsonServer.stdout.on('data', function (data) {
fs.writeFileSync("log/json-server.log", data.toString());
jsonServer.stderr.on('data', function (data) {
console.log('stderr: ' + data);
jsonServer.on('exit', function (code) {
console.log('child process exited with code ' + code);
再给你个方案：用 concurrently 方法去启动两个命令， 然后在gulp中把代理加上
"dev": "concurrently \"gulp dev\" \"nodemon mock-server.js\"",
这个方案可以参考
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。