node 拆分npmscript 構(gòu)建集成jquery arttemplate

起因:如果你覺得在npmscript里寫的太多,而且package.json里不好注釋
那可以把里面覺得一大坨的命令 寫進(jìn)js腳本 ,然后在node環(huán)境里執(zhí)行它們
回到大家都熟悉的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

// // 創(chuàng)建目錄,支持多級創(chuàng)建
// filedir.mkdir('D:/filedirTest');
// // 刪除文件或目錄
// filedir.del('D:/filedirTest');
// // 復(fù)制文件
// filedir.copy('D:/a.txt', 'D:/b.txt');
// // 讀文本文件
// var text = filedir.read('D:/filedirTest.txt');
// // 寫文本文件
// filedir.write('D:/filedir_write.txt', '0123456789');
// // JSON變量寫出到j(luò)son文件,若目錄不存在則自動創(chuàng)建
// 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');  //二進(jìn)制binary
        var Data = '';
        response.on('data', function (data) {    //加載到內(nèi)存
            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' }),],}")
 }

步驟一 還是把兩個文件放進(jìn)你的某個文件夾 然后npm-install
步驟二 執(zhí)行npm run create 構(gòu)建項(xiàng)目
步驟三 執(zhí)行npm run http 建立靜態(tài)資源服務(wù)器 實(shí)現(xiàn)實(shí)時刷新
步驟四 執(zhí)行npm run css 實(shí)現(xiàn)postcss實(shí)時輸出進(jìn)css-min文件夾 并自動加前綴
步驟五 上線前可執(zhí)行 npm run js 會壓縮js文件夾里所有的js 合成一個main.js
OK 就是這些

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容