【总结】gulp，本地web服务器

一.gulp(前端自动化工具)(mac系统)

参考网页：https://blog.csdn.net/c_kite/article/details/73165427

1.安装全局gulp命令

 

npm install -g gulp

创建一个项目文件夹,mkdir文件夹或者之间右键新建文件夹， 进入当前项目文件夹下，cd 文件夹，输入命令npm init

配置package.json文件, 这一部分看情况自己决定是否填, 不想填也可以, 直接按回车 

当前项目文件夹下输入命令npm install gulp --save-dev

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次

再在这个文件下创建一个gulpfile.js文件，作为该项目配置文件。

var gulp = require("gulp");//引入本地安装的 gulp模块
gulp.task("default",["task1","task2"],function(){//default 为默认任务名，这种情况只需要在命令行中输入 gulp即可。 如果有特定的taskName,需要在命令行中实行 gulp taskName
　　console.log("hi, gulp")
});
gulp.task("task1",function(){
console.log("task1 is here");
});
gulp.task("task2",["task3"],function(){
console.log("task2 is here");
});
gulp.task("task3",function(){
console.log("tesk3 is here");

})

gulp.task（）中的三个参数：第一个是命令的名称，第二个是可选参数，类型是数组，表示当前关联哪些命令，第三个是执行的操作函数。

上面的结果：先1，再3，再2，最后default。

用命令行输入：gulp，就可以执行上面的代码。

其实在项目文件夹下输入命令gulp时, 就是触发这个default任务, 因此, 我们定义多个自定义事件, 这样在输入gulp时, 就可以直接将我们写的命令也一起触发。

 

gulp API

gulp.src(globs[, options])

globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。 
options为可选参数。通常情况下我们不需要用到。

gulp.watch(glob[, opts], tasks)

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。

2.要运行一个已经写好的gulpfile.js文件。

命令进入gulpfile.js文件的目录，在这个目录中gulp。如典当行的例子，cd DianDangHang (输入个cd D+tab键可以自动补全剩下的)

然后直接运行gulp就会在设置的目录下把web代码创建过去。这个通过gulp创建的main-webapp-web文件夹里的代码就是上传到服务器的代码，我们需要改原本带有@@include下的html文件目录下的include目录下的文件，因为gulp.watch在实时监控，所以只要改了代码，就会在main-webapp-web文件相应改变。

二、mac下使用本地web服务器。

mac自带apache,之前配置过。

配置链接：https://www.cnblogs.com/wanxudong/p/5846907.html

现在配置好的，直接输入http://localhost，就可以显示配置的目录下的文件，配置在mac-用户-sites文件夹下。然后把web代码复制到文件下面就可以访问本地服务器。

学长说idea可以不用复制，下一步研究idea，改代码。