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,改代码。


猜你喜欢

转载自blog.csdn.net/weixin_40326021/article/details/80287028