[聚合文章] 玩转npmscript自动化构建 支持ES6 支持POSTCSS

步骤3 npm run dev
这时会弹出浏览器 默认index 之后node会监控src下的所有文件 包括js css html
js文件夹下的js会自动通过babel转换成dist文件夹里的js
lib文件夹默认是放一些js库 不会通过babel转换 只是复制到dist里的lib
css文件夹里的css 会自动通过postcss 压缩并自动添加前缀进dist里的css文件夹
另外你在src新建html文件 都会受到监听 都会复制进dist里的

PS 备注 添加删除修改src里的文件 一定要确保在开着npm run dev的监控下

是不是很叼~ 这是1.0 后续会继续的完善一下 写的有点匆忙
package.json

{  "name": "npm",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "css": "postcss -w ./src/css/*.css -d ./dist/css",    "http": "lite-server -c ./http_config.json",    "js": "uglifyjs ./dist/js/*.js -m -c  -o ./dist/js/main.js",    "ES6": "babel ./src/js -d ./dist/js -w",    "html_images_watch": "node html_images_watch.js",    "create": "node create.js",    "dev": "npm-run-all --parallel css http ES6 html_images_watch"    },  "author": "",  "license": "ISC",  "devDependencies": {    "autoprefixer": "^7.2.1",    "babel-cli": "^6.26.0",    "babel-preset-env": "^1.6.1",    "chokidar": "^1.7.0",    "cross-var": "^1.1.0",    "cssnano": "^3.10.0",    "filedir": "^1.0.1",    "lite-server": "^2.3.0",    "npm-run-all": "^4.1.2",    "postcss-cli": "^4.1.1",    "uglify-js": "^3.2.1"  },  "dependencies": {    "art-template": "^4.12.2"  }}

html_images_watch.js

var chokidar = require('chokidar');var filedir=require("filedir");var path = require("path");var fs = require("fs");function copy_(src,type,target){    var filePath = path.resolve();    var fileArr = [];        fs.readdir(src,function(err,files){        if(err){            console.log(err);            return;        }        files.forEach(function(filename){   //提取所有html文件            if(getdir(filename) == type){                 fileArr.push(filename)               }         });         fileArr.forEach(function(el){     //把所有html复制进dist                filedir.copy(src+"/"+el, target+el)         })
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。