美文网首页
node 拆分npmscript 构建集成jquery artt

node 拆分npmscript 构建集成jquery artt

作者: infi_ | 来源:发表于2017-12-07 16:23 被阅读0次

    起因:如果你觉得在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 就是这些

    相关文章

      网友评论

          本文标题:node 拆分npmscript 构建集成jquery artt

          本文链接:https://www.haomeiwen.com/subject/tuxjixtx.html