Visual Studio Code 配置Gulp项目构建工具

最新推荐文章于 2023-03-21 20:33:56 发布

Gave Me Five

最新推荐文章于 2023-03-21 20:33:56 发布

阅读量857

点赞数

分类专栏： Node 文章标签： npm visual studio code node.js gulp

本文链接：https://blog.csdn.net/weixin_36872950/article/details/103740562

版权

Node 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

Visual Studio Code 配置Gulp项目构建工具

一、从无到有配置Gulp插件

1. 检查环境

打开Visual Studio Code终端，检查npm、node和gulp版本（当前已存在构建环境）
Visual

2. 项目初始化

创建项目目录，并在Visual Studio Code中打开（快捷键：Ctrl+K Ctrl+O），然后打开vs code 终端进入项目的根目录，初始化项目：
Visual Studio Code初始化项目
其中，项目初始化时需要输入以下配置信息，详细请看package.json的配置项及其用法：

package name:                 你的项目名字叫啥
version:                      版本号
description:                  对项目的描述
entry point:                  项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command:                 项目启动的时候要用什么命令来执行脚本文件（默认为node index.js）
git repository:               如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds：                    项目关键字（我也不知道有啥用，所以我就不写了）
author:                       作者的名字
license:                      发行项目需要的证书

输入配置信息时也可以直接回车，使用默认配置，需要修改时直接修改项目目录
下的package.json文件，达到同样的效果

3. 安装依赖

安装Gulp依赖，下面两种方式（ 1，2 ）选其中一种方式，推荐按 方式1 安装依赖

vs code 终端执行命令安装依赖：

	npm install gulp gulp-merge gulp-concat gulp-angular-templatecache --save-dev

或者编辑package.json文件，添加devDependencies内容（版本号一定要与node版本对应）

      1. dependencies —— 运行依赖，依赖的项该是正常运行该包时所需要的依赖项
      2. devDependencies —— 开发依赖，开发的时候需要的依赖项，像一些进行单元测试之类的包。

{
  "name": "gulpdemo",
  "version": "1.0.0",
  "description": "gulp测试项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yanno",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-merge": "^0.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-angular-templatecache": "^3.0.0"
  }
}

然后执行npm install安装依赖

3. 编写运行

项目根目录创建gulpfile.js文件 gulpfile文件详细说明走这边 >_> ，编写文件内容

var gulp = require('gulp');
var merge = require('gulp-merge');
var concat = require('gulp-concat');
var templateCache = require('gulp-angular-templatecache');

// 定义文件路径
var custom_source = {
    js: {
        src: [
            // module files
            'custom/**/module.js',
            // other js files [controllers, services, etc.]
            'custom/**/!(module)*.js',
        ],
        tpl: 'custom/**/*.html'
    }
};
var destinations = {
    js: 'build'
};
// 定义custom任务
function custom() {
    return merge(gulp.src(custom_source.js.src), getCustomTemplateStream())
        .pipe(concat('custom.js'))
        .pipe(gulp.dest(destinations.js));
};

function watch() { 
    // 监测custom目录下js文件的改变 
    gulp.watch(custom_source.js.src, gulp.series('custom'));

    // 监测
}

var swallowError = function(error){
    console.log(error.toString());
    this.emit('end')
};

var getCustomTemplateStream = function () {
    return gulp.src(custom_source.js.tpl)
        .pipe(templateCache({
            root: 'custom/',
            module: 'app.custom'
        }))
};

exports.custom = custom;
exports.watch = watch;
exports.default = gulp.parallel(custom, watch);