使用gulp实现项目文件更改自动同步到服务器文件夹

最新推荐文章于 2020-12-30 23:44:58 发布

没心没肺可苦可乐

最新推荐文章于 2020-12-30 23:44:58 发布

阅读量767

点赞数

本文链接：https://blog.csdn.net/qq_17492249/article/details/86579327

版权

前提：安装node

全局安装gulp

npm install gulp -g

初始化项目
在项目根目录下打开cmd（命令行）运行：

npm init

一路回车，就会在项目的文件夹下产生一个package.json文件
在路径下会形成这样的一个.json文件（部分内容为后添加的）

{
  "name": "gulptest",//项目名称（必须）不能有大写
  "version": "0.0.1",//项目版本（必须）
  "description": "这是一个gulp的测试程序",//项目描述（必须）
"homepage": "",   //项目主页
  "main": "index.js",//入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [//关键词
    "gulp"
  ],
  "author": "jiaaaaaqi",//作者
  "license": "ISC"//项目许可协议
"devDependencies": {    //项目依赖的插件
    "gulp": "^4.0.0",
    "gulp-less": "^3.0.0"
  }
}

本地安装gulp(在项目目录下安装gulp)
此步骤的目的是：把gulp里的所有的js文件从服务器上下载到项目目录下（node_modules）

把当前目录转到项目目录：cd 项目目录，或者在项目目录下，按住shift键，同时点击鼠标右键，选择“在此处打开命令行”(windows10的话选择在此处打开Powershell窗口)
在cmd/Powershell(命令行)执行：
npm install gulp --save-dev

安装完成后，就会在项目目录下产生一个node_modules文件

使用gulp实现文件热同步
在项目的根目录建立 gulpfile.js文件。在这个js文件中写上实现热同步的js代码（gulp能实现的功能很多很强大，此处仅展示实现热同步项目所有内容的代码）

var gulp = require("gulp");

//监听任务
gulp.task("watch-all",async ()=>{
    //复制文件
    gulp.watch("./**/*",async ()=>{ //监听项目开发路径下所有的内容（包括子文件夹，不管有多少级）
        gulp.src("./**/*") //项目开发路径下所有的内容
        .pipe(gulp.dest("D:\\phpStudy\\WWW\\1more")); //项目发布路径（服务器文件夹）
    });
}); 
/**
*  gulp.src()  是读取将要处理的文件，即源文件
*  pipe() 管道，是如何处理该文件（如：sass编译，复制文件，压缩文件等）。
*  gulp.dest()  是处理后的文件的路径，即目的文件。
**/

常见问题：

如果出现了cannot find module '***'表示该模块没有安装成功，
执行npm install gulp *** --save-dev，就可以单独安装该模块。

正在进行的项目如何用gulp:
1、新建空文件夹作为项目的文件夹（项目文件夹不要用 /gulp 命名）
2、用npm初始化项目：用npm init命令产生package.json文件（第2步）
3、本地安装gulp npm install gulp --save-dev
4、把项目目前的所有文件拷贝的到新建的项目文件夹里
5、在项目根目录下写gulpfile.js的代码。