nvheader 是啥？

主要是管理模块开发的简易工具,用于打包处理压缩Template,ES,SASS等,目前常见头尾系统和各个模块业务的封装方法

nvheader 快速使用

$ npm install nvheader -g

安装完毕后，检验是否成功

$ nv

常用命令

 Usage: nv <Command> <Options>

     Command:
     
        build or b  :build project to view
        
        make or m  :make a new project by selfName
        
        publish or p  :publish your project to server by ftp
        
        start or s  :auto run build all and hot watch the project in developing
        
        clean or c  :remove version folder
        

     Options:
     
        <build options> <isPrd>
        --html  build html on config input and output
        --js   build and babel on config input and output, you can use es6
        --sass build sass to css, clean css, autoprefixer and so on
        --sprite sprite many pngs to one png and sass
        --all  build html,js,sass in the same time

        <isPrd>
        -p  : product mode,include:compress html,css,js and remove other config
        -d  : (default) expanded html,css,js and add other config
        -t  : use the -p environment config ,but split css and js ,not join in one

        e.g:
        nv build --html        : build template to html by debug mode
        nv build --all -t      : build all by test mode
        nv build --sass -p     : build sass to css by product mode
        
        
        <make> [name]
          name : A name of folder when you created
          e.g:
          nv make firstNvProject      : create a firstNvProject folder
        
        
        
        notice: before you publish, you should make sure your '__build__' dir files in test mode
        
                                 

待修复问题

• nv start -d 模式下无法正常启动热更新,需要手动刷新浏览器才能浏览,目前正在排查问题

Blob

Blog

nv.config.js 所有配置信息表

module.exports = {
    name: "模块名称",
    version: "模块版本",
    build:{...buildOptions},
    publish:{...publishOptions},
    start:{...startOptions}
}

buildOptions

   var buildOptions = {
         production:'',
         //此模式只针对线上版本生效,即`-p`的时候
         autoVersion:'',
         _ROOT : 'src',
         _DESTSTYLES : dest._DESTSTYLES,
         _STYLE : ['src/'+dest._DESTSTYLES+'/**/*.scss'],
         _JS : ['src/'+dest._DESTSTYLES+'/**/*.js'],
         _VIEW : 'views',
         _DEST : dest._DEST,
         _COMPONENT:{
             dir:'components',
             mock:'data.js'
         },
         banner: '/*!Name: {{ name }}\n * Date: {{ date }} */\n',
         bannerHtml:'<!-- !Name: {{ name }} Date: {{ date }} -->\n',
         templates:['src/views/*.html'],
         sprites: {
             cssName: '__sprite.scss',
             imgName: 'i/__sprite.png',
             items: ['app/components/**/sprite-*.png']
         },
         pngquant: {
             quality: '80-90',
             speed: 4
         },
         images:['src/components/**/i/*.+(jpg|png|gif)'],
         babel:false
   }

publishOptions

   var publishOptions = {
     deploy:{
             host: '',
             user: '',
             password: '',
             parallel: 10,
             src: '__build__/**',
             dest: ''
         },
     _isForce:false
   }

startOptions

   var startOptions = {
      _PATH : ["src/**/*.html","src/**/*.tmpl","src/**/*.sass","src/**/*.scss","src/**/*.js"],
      server:{
          livereload: {
              port:35729,
              enable:true,
              src:"//localhost:35729/liverload.js?snipver=1"
          },
          directoryListing:true,
          port:9876,
          open:'__build__/'+_config.name+"/"+_config.version+"/views/index.demo.cn.html"
      }
   }