挂入angular-cli构建手表

时间:2017-02-21 10:03:21

标签: angular angular-cli

我想知道是否可以挂钩angular-cli的build / watch命令:

  

ng build / w

生成文件并将其放入项目的/dist文件夹

我只是想在构建完成后将dist文件夹复制到另一个目录,是否可能?

5 个答案:

答案 0 :(得分:9)

我设法通过并行任务,copyfiles和npm watch实现了我想要的目标:

npm dev dependencies:

"npm-watch": "^0.1.8",
"parallelshell": "^2.0.0",
"copyfiles": "^1.2.0",

package.json片段:

"watch": {
    "copy-files": "dist/*.js"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "watch": "npm-watch",
    "copy-files": "copyfiles src/** dist/** ../angular",
    "ng-build": "ng build -w",
    "build": "parallelshell \"ng build\" \"npm run watch\" "
  },

然后

  

npm run build

FWIW手表配置说,如果dist / * .js中有任何变化,运行“copy-files”npm脚本...

答案 1 :(得分:2)

One way is to run npm run build and have a postbuild script that copies the content of index.html from your dist folder to your html/cshtml file in your desired folder and changes the script and link tag's paths in your newly copied file to point to the dist folder after the build it complete. Now run ng build --watch and start development. I'm using angular 6 and angular-cli with .Net MVC 4.5 and I use ~\Views\Home as my desired destination folder.

To have the watch mode running in my project I Run npm run build:watch Now the watch mode works. Below is my package.json:

"scripts": {
        "ng": "ng",
        "build": "ng build",
        "build:watch": "npm run build && ng build --watch",
        "build:prod": "ng build --prod && npm run postbuild",
        "postbuild": "npm run copyindex && npm run fixpath",
        "copyindex": "copy /D \".\\dist\\index.html\" \"Views\\Home\\Index.cshtml\" /Y",
        "fixpath": "powershell -Command \"(gc Views\\Home\\Index.cshtml) -replace '(\\w+\\.js|\\w+\\.css)', '~/dist/$1' | Out-File Views\\Home\\Index.cshtml\"",
    },

package.json explanation : after running npm run build the postbuild gets called automatically. postbuild will call copyindex and fixpath one after another.

  • copyindex will copy the content of my dist\index.html to my Views\Home\Index.cshtml.
  • fixpath will add ~/dist/ to the beginning of all js and css file paths in my Index.cshtml.
  • build:watch: calls ng build --watch.
  • build:prod: is for prod build and calls ng build --prod and postbuild one after another.

Note

  • The commands can be run in any console on windows (cmd or bash).
  • I used powershell in my fixpath. It can be replaced by your favorite tool.

答案 2 :(得分:1)

您应该创建自己的节点构建脚本,该脚本调用process.stdout.write()命令,然后将文件复制到目录:

ng build

没有办法挂钩let thread = exec('ng build -e=prod --prod', { maxBuffer: 1024 * 5000}); thread.on('close', (data) => { //do your moving stuff here }); (尚未),我不认为他们会允许它。据我所知,他们喜欢在那里关闭东西,因为这样他们就能够很多地改变/调整/更新构建过程,而不会让旧的构建变得混乱

答案 3 :(得分:1)

如果您只想更改输出的文件夹,可以在angular-cli.json文件中进行设置。有一个“outdir”设置,您可以将其更改为您希望其输出的文件夹。

答案 4 :(得分:0)

那些寻求角度6+以上解法的人

在angular.json中

from email.message import EmailMessage
import smtplib

EMAIL = '{Email}'
PASSWORD = '{Password}'


with open ('{File containing Id}', 'r') as ids:
    for id in ids:
        print (id)

        msg = EmailMessage()
        msg['Subject'] = '{Subject}'
        msg['From'] = EMAIL
        msg['To'] = id

        message = '{Message}'
        msg.set_content(message)

        with smtplib.SMTP_SSL('smtp.gmail.com', 465) as smtp:
            smtp.login(EMAIL,PASSWORD)
            smtp.send_message(msg)

        print('EMAIL SENT')