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