zoukankan      html  css  js  c++  java
  • node前端自动化

    一、前端自动化-项目构建

    我们平时写代码,喜欢建一个project,然后里面是css、js、images文件,以及index.html,而node可以自动化构建好项目,如下:

    /**
     * Created by 毅 on 2015/9/20.
     */
    
    var projectData = {
    
        'name' : 'project',
        'fileData' : [
            {
                'name' : 'css',
                'type' : 'dir'
            },
            {
                'name' : 'js',
                'type' : 'dir'
            },
            {
                'name' : 'images',
                'type' : 'dir'
            },
            {
                'name' : 'index.html',
                'type' : 'file',
                'content' : '<html>
    	<head>
    		<title>title</title>
    	</head>
    	<body>
    		<h1>Hello</h1>
    	</body>
    </html>',
            }
        ]
    
    };
    
    var fs = require('fs');
    
    if ( projectData.name ) {
        fs.mkdirSync(projectData.name);
    
        var fileData = projectData.fileData;
    
        if ( fileData && fileData.forEach ) {
    
            fileData.forEach(function(f) {
    
                f.path = projectData.name + '/' + f.name;
    
                f.content = f.content || '';
    
                switch (f.type) {
    
                    case 'dir':
                        fs.mkdirSync(f.path);
                        break;
    
                    case 'file':
                        fs.writeFileSync(f.path, f.content);
                        break;
    
                    default :
                        break;
    
                }
    
            });
    
        }
    
    }

     二、前端自动化--监听文件的变化

    在上面的自动生成的project文件夹里面再建一个source文件夹。下面的代码就是监听source文件夹的任何变化,不管是新建文件还是往新建文件中加入内容。它都会合并到js/index.js中去。

    var fs = require('fs');
    
    var filedir = './project/source';
    
    fs.watch(filedir, function(ev, file) {
    
        //console.log(ev + ' / ' + file); // 这里不需要判断file是否有内容
    
        //只要有一个文件发生了变化,我们就需要对这个文件夹下的所有文件进行读取,然后合并
    
        fs.readdir(filedir, function(err, dataList) {
    
            var arr = [];
    
            console.log(dataList);
    
            dataList.forEach(function(f) {
    
                if (f) {
                    var info = fs.statSync(filedir + '/' + f);
    
                    //console.log(info);
    
                    if (info.mode == 33206) {
                        arr.push(filedir + '/' + f);
                    }
                }
    
            });
    
            //console.log(arr);
    
            //读取数组中的文件内容,并合并
    
            var content = '';
            arr.forEach(function(f) {
                var c = fs.readFileSync( f );
                //console.log(c);
    
                content += c.toString() + '
    ';
    
            });
    
            console.log(content);
    
            fs.writeFile('./project/js/index.js', content);
    
        });
    
    })
  • 相关阅读:
    ちょっとした難しい言葉まとめ②
    objective -c 知識点
    Viewing the Raw SQL Statement(xcode で)
    ちょっとした難しい言葉まとめ③
    ちょっとした難しい言葉まとめ④
    7.25 8figting!
    7.25 7figting!
    7.25 6figting!
    7.25 5
    7.25 4
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/5532696.html
Copyright © 2011-2022 走看看