json NPM构建任务(无Browserify)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json NPM构建任务(无Browserify)相关的知识,希望对你有一定的参考价值。

{
  "name": "new-app",
  "version": "1.0.0",
  "description": "Npm tasks for building small websites & apps",
  "scripts": {

    "/": "// --- GENERAL--- //",
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "npm run build:dev",

    "/": "// --- COPY JS ASSETS VENDOR --- //",
    "copy:js": "cp src/js/*.js dist/js/",
    "copy:assets": "cp -r src/assets/* dist/assets",
    "copy:vendor": "vendor-copy",
    "copy": "npm run copy:js && npm run copy:assets && npm run copy:vendor",

    "/": "// --- HTML --- //",
    "html:dev": "html-includes --src src --dest dist",
    "html:prod": "html-includes --src src --dest dist",

    "/": "// --- CSS --- //",
    "css:dev": "node-sass --output-style expanded --indent-type tab --indent-width 1 src/scss -o dist/css",
    "css:prod": "node-sass --output-style expanded --indent-type tab --indent-width 1 src/scss -o dist/css | postcss -u autoprefixer -r dist/css/*",

    "/": "// --- BUILD (GENERAL) --- //",
    "clean": "rimraf dist",
    "mkdirs": "mkdirp dist/js && mkdirp dist/css && mkdirp dist/assets",

    "/": "// --- BUILD (DEVELOPMENT) --- //",
    "prebuild:dev": "npm run clean && npm run mkdirs && npm run copy",
    "build:dev": "npm run css:dev && npm run html:dev",

    "/": "// --- BUILD (PRODUCTION) --- //",
    "prebuild:prod": "npm run clean && npm run mkdirs && npm run copy",
    "build:prod": "npm run css:prod && npm run html:prod",

    "/": "// --- SERVE --- //",
    "preserve": "npm run build:dev",
    "serve": "browser-sync start --server \"dist\" --files \"dist/**/*.(js|css|html)\"",

    "/": "// --- WATCH --- //",
    "watch:html": "onchange \"src/*.html\" -v -- npm run html:dev",
    "watch:css": "onchange \"src/scss/*.scss\" -v -- npm run css:dev",
    "watch:js": "onchange \"src/js/*.js\" -v -- npm run copy:js",
    "watch:assets": "onchange \"assets/**/*\" -- npm run copy:assets",
    "watch": "parallelshell  \"npm run watch:html\" \"npm run watch:css\" \"npm run watch:js\" \"npm run watch:assets\"",

    "/": "// --- SERVE & WATCH --- //",
    "start": "parallelshell \"npm run serve\" \"npm run watch\""
  },
  "author": "Sebastian Kulig",
  "license": "Unlicensed",
  "dependencies": {
    "bootstrap": "4.0.0-beta.3",
    "jquery": "3.2.1",
    "popper.js": "1.12.9"
  },
  "devDependencies": {
    "autoprefixer": "^7.2.4",
    "browser-sync": "^2.23.3",
    "eslint": "^4.14.0",
    "html-includes": "^1.2.3",
    "imagemin-cli": "^3.0.0",
    "mkdirp": "^0.5.1",
    "node-sass": "^4.7.2",
    "onchange": "^3.3.0",
    "parallelshell": "^3.0.2",
    "postcss-cli": "^4.1.1",
    "rimraf": "^2.6.2",
    "vendor-copy": "^1.3.1"
  },
  "vendorCopy": [
    {
      "from": "node_modules/jquery/dist/jquery.slim.min.js",
      "to": "dist/assets/vendor/jquery.slim.min.js"
    },
    {
      "from": "node_modules/bootstrap/dist/js/bootstrap.min.js",
      "to": "dist/assets/vendor/bootstrap.min.js"
    },
    {
      "from": "node_modules/popper.js/dist/umd/popper.min.js",
      "to": "dist/assets/vendor/popper.min.js"
    }
  ]
}

以上是关于json NPM构建任务(无Browserify)的主要内容,如果未能解决你的问题,请参考以下文章

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]

将 browserify 与 npm jQuery 和非 npm 插件一起使用

通过 cosmos:browserify 在 Meteor 中使用 npm 包

npm脚本的时间/性能指标

如何避免多次加载外部库? npm包,browserify和脚本标签

Yarn Workspaces 和 Browserify - 子文件夹中的 package.json 会破坏构建