node 拆分npmscript 构建集成jquery arttemplate

起因:如果你觉得在npmscript里写的太多，而且package.json里不好注释
那可以把里面觉得一大坨的命令写进js脚本，然后在node环境里执行它们
回到大家都熟悉的node顿时感觉亲切了不少.

初始时就需要两个文件了一个package.json 一个create.js
package.json

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "css": "postcss -w css/*.css -d css-min",
    "http": "lite-server",
    "js": "uglifyjs js/*.js -m -c  -o js-min/main.js",
    "create": "node create.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.2.1",
    "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"
  }
}

create.js

// // 创建目录，支持多级创建
// filedir.mkdir('D:/filedirTest');
// // 删除文件或目录
// filedir.del('D:/filedirTest');
// // 复制文件
// filedir.copy('D:/a.txt', 'D:/b.txt');
// // 读文本文件
// var text = filedir.read('D:/filedirTest.txt');
// // 写文本文件
// filedir.write('D:/filedir_write.txt', '0123456789');
// // JSON变量写出到json文件，若目录不存在则自动创建
// filedir.writeJsonFile('D:/filedir_write.txt', {Color:'Blue'});
// // 判断文件或目录是否存在
// filedir.isExist('D:/filedir_write.txt');
// // 判断是不是一个已存在的文件
// filedir.isFile('D:/filedirTest');
// // 判断是不是一个已存在的目录
// filedir.isDir('D:/filedirTest');


var http = require('https')
var filedir=require("filedir");

var jquery_url="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"

function get_js(url,address){
    http.get(url, function (response) {
        response.setEncoding('binary');  //二进制binary
        var Data = '';
        response.on('data', function (data) {    //加载到内存
            Data += data;
        }).on('end', function () {          //加载完
            filedir.write(address, Data );
        })
      })

}
//
function get_arttemplate(){
    var arttemplate = filedir.read('./node_modules/art-template/lib/template-web.js')
    filedir.write('./js/arttemplate.js',arttemplate)
}


if(!filedir.isDir('./css')&&!filedir.isFile("./css/main.css")){
  filedir.mkdir("./css");
  filedir.write("./css/main.css",
   "*{padding:0;margin:0};"+
   "a{text-decoration:none};ul,ol{list-style:none}"+
    "img{border:none}"+
    "br{font-size:0;line-height:0;clear:both}"
   )
}
if(!filedir.isDir("./js")&&!filedir.isFile("./js/jquery.js")){
      filedir.mkdir("./js");
      get_js(jquery_url,"./js/jquery.js")
     
}
if(filedir.isDir("./js")&&!filedir.isFile("./js/jquery.js")){
    get_js(jquery_url,"./js/jquery.js")
    
}

if(!filedir.isDir("./js")&&!filedir.isFile("./js/arttemplate.js")){
    filedir.mkdir("./js");
    get_arttemplate()
    
}
if(filedir.isDir("./js")&&!filedir.isFile("./js/arttemplate.js")){
    get_arttemplate()
    
}



if(!filedir.isDir("./images")){
    filedir.mkdir("./images")
}
if(!filedir.isDir("./css-min")){
    filedir.mkdir("./css-min")

}

if(!filedir.isDir("./js-min")){
    filedir.mkdir("./js-min")
}
if(!filedir.isFile("./index.html")){
   
    filedir.write("./index.html","")
}
if(!filedir.isFile("./postcss.config.js")){
    
     filedir.write("./postcss.config.js","module.exports = {plugins: [require('autoprefixer'),require('cssnano')({preset: 'default' }),],}")
 }

步骤一还是把两个文件放进你的某个文件夹然后npm-install
步骤二执行npm run create 构建项目
步骤三执行npm run http 建立静态资源服务器实现实时刷新
步骤四执行npm run css 实现postcss实时输出进css-min文件夹并自动加前缀
步骤五上线前可执行 npm run js 会压缩js文件夹里所有的js 合成一个main.js
OK 就是这些

最后编辑于：2017.12.07 16:35:59