玩轉npmscript自動化構建 支持ES6 支持POSTCSS(2)


這次更新去掉了自動刷新瀏覽器，
如果感覺不爽 可以自行加live-reload 即可

簡化了npm命令:
現在npm run create已經不需要了
npm install之后只需npm run dev即可實現監聽 和VUE保持一致 便于記憶

自動壓縮css并加前綴
支持ES6

使用方法copy成對應的js和json之后
1 npm install
2 npm run dev

package.json

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "config": {
    "port": 8000,
    "ip": "192.168.123.1"
  },
  "scripts": {
    "css": "postcss -w ./src/css/*.css -d ./dist/css",
    "http": "cd ./dist&&cross-var http-server -c-1 -o -a $npm_package_config_ip -p $npm_package_config_port",
    "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",
    "dev": "node create.js",
    "dev_Manual": "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",
    "chalk": "^2.3.0",
    "chokidar": "^1.7.0",
    "cross-var": "^1.1.0",
    "cssnano": "^3.10.0",
    "filedir": "^1.0.1",
    "http-server": "^0.10.0",
    "npm-run-all": "^4.1.2",
    "postcss-cli": "^4.1.1",
    "shelljs": "^0.7.8",
    "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");
var shell = require('shelljs');
var chalk=require("chalk")

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)
         })
         
    });

}


var watcher = chokidar.watch('./src', {
  ignored: /[\/\\]\./, persistent: true
});

var log = console.log.bind(console);

function getdir(url){
    var arr = url.split('.');
    var len = arr.length;
    return arr[len-1];
}

watcher
  .on('add', function(path) { 
        console.log(chalk.yellow("您添加了"+path+"文件"))
        if(getdir(path)=="html"){ //如果添加了html文件
            copy_("./src","html","./dist/")
        } 
        if(getdir(path)=="jpg"){ //如果添加了html文件
           
            if(path.split("\\")[1]!="images"){
                console.log(chalk.red("圖片應該放進images文件夾內,故這次添加文件失敗"))
            }
            copy_("./src/images","jpg","./dist/images/")
        } 
        if(getdir(path)=="png"){ //如果添加了html文件
            if(path.split("\\")[1]!="images"){
                console.log(chalk.red("圖片應該放進images文件夾內,故這次添加文件失敗"))
            }
            copy_("./src/images","png","./dist/images/")
        }
        if(getdir(path)=="gif"){ //如果添加了html文件
            if(path.split("\\")[1]!="images"){
                console.log(chalk.red("圖片應該放進images文件夾內,故這次添加文件失敗"))
            }
            copy_("./src/images","gif","./dist/images/")
        }
        if(getdir(path)=="jpeg"){ //如果添加了html文件
            if(path.split("\\")[1]!="images"){
                console.log(chalk.red("圖片應該放進images文件夾內,故這次添加文件失敗"))
            }
            copy_("./src/images","jpeg","./dist/images/")
        }
        if(path.split("\\")[1]=="lib"){
          
            copy_("./src/lib","js","./dist/lib/")
         }
        
   })
  .on('addDir', function(path) { 
      
   })
  .on('change', function(path) { 
    console.log(chalk.yellow("您改變了"+path+"文件"))  
    
    if(getdir(path)=="html"){ //如果添加了html文件
        copy_("./src","html","./dist/")
    } 

     if(path.split("\\")[1]=="lib"){
    
        copy_("./src/lib","js","./dist/lib/")
     }



   })
  .on('unlink', function(path) { 
      console.log(chalk.yellow("您刪除了"+path));
      if(getdir(path)=="html"){ //如果刪除了html文件
          var file_name=path.split("\\")[0]
          filedir.del('./dist/'+file_name)
      }

      if(getdir(path)=="jpg"||getdir(path)=="png"||getdir(path)=="gif"||getdir(path)=="jpeg"){ 
        var file_name=path.split("\\")[2]

        filedir.del('./dist/images/'+file_name)
      }


       if(path.split("\\")[1]=="lib"){
            var file_name=path.split("\\")[2]
            filedir.del('./dist/lib/'+file_name);
  
         }
         if(path.split("\\")[1]=="js"){
            var file_name=path.split("\\")[2]
           
            filedir.del('./dist/js/'+file_name);
  
         }
      
  })


  .on('unlinkDir', function(path) { 
      
  })
  .on('error', function(error) { log('Error happened', error); })
  .on('ready', function() { 
    console.log(chalk.yellow("歡迎使用,一切準備就緒")) 
   })
  .on('raw', function(event, path, details) { })

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 path = require("path");
var shelljs=require("shelljs")
var chalk=require("chalk")
var port=8000
//console.log($npm_package_config_ip)
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('./src/lib/arttemplate.js',arttemplate)
}
var Prompt={
    dist:{src:"./dist",text:"開始創建dist文件夾"},
    dist_css:{src:"./dist/css",text:"開始創建dist/css"},
    dist_images:{src:"./dist/images",text:"開始創建dist/images"},
    dist_js:{src:"./dist/js",text:"開始創建dist/js"},
    dist_lib:{src:"./dist/lib",text:"開始創建dist/lib"},
    dist_index_html:{src:"./dist/index.html",text:"開始創建dist/index.html"},

    src:{src:"./src",text:"開始創建src文件夾"},
    src_css:{src:"./src/css",text:"開始創建src/css"},
    src_images:{src:"./src/images",text:"開始創建src/images"},
    src_js:{src:"./src/js",text:"開始創建src/js"},
    src_lib:{src:"./src/lib",text:"開始創建src/lib"},
    src_index_html:{src:"./src/index.html",text:"開始創建src/index.html"}
}
Object.prototype.hasO=Object.prototype.hasOwnProperty
function judge(){
   var this_=this
   for(var i in this_){
       if(this_.hasO(i)){
           if(!filedir.isDir(this_[i].src)){
             var te_name=this_[i].src.split(".");
             te_name=te_name[te_name.length-1];
             
             var for_css=this_[i].src.split("/")
             for_css=for_css[for_css.length-1]
             if(te_name=="html"&&filedir.isFile(this_[i].src)  ){
                console.log(chalk.yellow("已經有index.html了,不要重復create"))
                 continue
             }
             if(te_name=="html"&&!(filedir.isFile(this_[i].src))  ){   
                console.log(chalk.green(this_[i].text));
                filedir.write(this_[i].src,"Welcome to use")
                continue
             }else{
                console.log(chalk.green(this_[i].text));
                filedir.mkdir(this_[i].src);
             } 
             if(for_css=="css"&&i=="src_css"){
                filedir.mkdir(this_[i].src)
                filedir.write("./src/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}"
                 )
             }
             
          }
       }
   }
}
 judge.call(Prompt)


if(!filedir.isFile("./.babelrc")){
    console.log(chalk.green("開始創建.babelrc"))
    filedir.write('./.babelrc',"{\"presets\": [\"env\"],\"plugins\" : [ ]}")
   }
 
if(!filedir.isFile("./postcss.config.js")){
    console.log(chalk.green("開始創建postcss.config.js"))  
    filedir.write("./postcss.config.js","module.exports = {plugins: [require('autoprefixer'),require('cssnano')({preset: 'default' }),],}")
   }
    
if(!filedir.isFile("./http_config.json")){
      console.log(chalk.green("開始創建http_config.json"))
      filedir.write("./http_config.json","{\"port\": "+port+",\"files\": [\"./dist/**/*.{html,htm,css,js}\"],\"server\": { \"baseDir\": \"./dist\" }}")
}



console.log(chalk.cyan(
"-------------------\n"+
"所有文件初始化完畢完畢\n"+
"-------------------\n"
))
console.log(chalk.cyan(
"-------------------\n"+
"開始啟動監聽Wait three seconds\n"+
"-------------------\n"
    ))
shelljs.exec("npm-run-all --parallel css http ES6 html_images_watch")
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。