默认src是你要coding的文件夹 dist是输出的文件夹
步骤1 存成指定名字之后的 然后npm install 初始形态
步骤2 npm run create之后的形态
步骤3 npm run dev
这时会弹出浏览器 默认index 之后node会监控src下的所有文件 包括js css html
js文件夹下的js会自动通过babel转换成dist文件夹里的js
lib文件夹默认是放一些js库 不会通过babel转换 只是复制到dist里的lib
css文件夹里的css 会自动通过postcss 压缩并自动添加前缀进dist里的css文件夹
另外你在src新建html文件 都会受到监听 都会复制进dist里的
PS 备注 添加删除修改src里的文件 一定要确保在开着npm run dev的监控下
是不是很叼~ 这是1.0 后续会继续的完善一下 写的有点匆忙
package.json
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"css": "postcss -w ./src/css/*.css -d ./dist/css",
"http": "lite-server -c ./http_config.json",
"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",
"create": "node create.js",
"dev": "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",
"chokidar": "^1.7.0",
"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"
}
}
html_images_watch.js
var chokidar = require('chokidar');
var filedir=require("filedir");
var path = require("path");
var fs = require("fs");
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) {
if(getdir(path)=="html"){ //如果添加了html文件
copy_("./src","html","./dist/")
}
if(getdir(path)=="jpg"){ //如果添加了html文件
copy_("./src/images","jpg","./dist/images/")
}
if(getdir(path)=="png"){ //如果添加了html文件
copy_("./src/images","png","./dist/images/")
}
if(getdir(path)=="gif"){ //如果添加了html文件
copy_("./src/images","gif","./dist/images/")
}
if(getdir(path)=="jpeg"){ //如果添加了html文件
copy_("./src/images","jpeg","./dist/images/")
}
if(path.indexOf("lib")){
log("lib")
copy_("./src/lib","js","./dist/lib/")
}
})
.on('addDir', function(path) {
})
.on('change', function(path) {
if(getdir(path)=="html"){ //如果添加了html文件
copy_("./src","html","./dist/")
}
if(path.indexOf("lib")){
log("lib")
copy_("./src/lib","js","./dist/lib/")
}
})
.on('unlink', function(path) {
if(getdir(path)=="html"){ //如果删除了html文件
var file_name=path.split("\\")[1]
filedir.del('./dist/'+file_name)
}
if(getdir(path)=="jpg"||getdir(path)=="png"||getdir(path)=="gif"||getdir(path)=="jpeg"){ //如果添加删除了html文件
var file_name=path.split("\\")[1]
filedir.del('./dist/images'+file_name)
}
})
.on('unlinkDir', function(path) {
})
.on('error', function(error) { log('Error happened', error); })
.on('ready', function() {
})
.on('raw', function(event, path, details) { })
create.js
var http = require('https')
var filedir=require("filedir");
var path = require("path");
var fs = require("fs");
var port=8000
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)
}
if(!filedir.isDir("./dist")){
filedir.mkdir("./dist");
if(!filedir.isDir("./dist/css")){
filedir.mkdir("./dist/css");
}
if(!filedir.isDir("./dist/images")){
filedir.mkdir("./dist/images");
}
if(!filedir.isDir("./dist/js")){
filedir.mkdir("./dist/js");
}
if(!filedir.isDir("./dist/lib")){
filedir.mkdir("./dist/lib");
}
}
if(!filedir.isDir("./src")){
filedir.mkdir("./src");
if(!filedir.isDir("./src/css")){
filedir.mkdir("./src/css");
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}"
)
}
if(!filedir.isDir("./src/images")){
filedir.mkdir("./src/images");
}
if(!filedir.isDir("./src/js")){
filedir.mkdir("./src/js");
}
if(!filedir.isDir("./src/lib")){
filedir.mkdir("./src/lib");
}
if(!filedir.isFile("./src/index.html")){
filedir.write('./src/index.html',"Welcome to use")
}
}
if(!filedir.isFile("./.babelrc")){
filedir.write('./.babelrc',"{\"presets\": [\"env\"],\"plugins\" : [ ]}")
}
if(!filedir.isFile("./postcss.config.js")){
filedir.write("./postcss.config.js","module.exports = {plugins: [require('autoprefixer'),require('cssnano')({preset: 'default' }),],}")
}
if(!filedir.isFile("./http_config.json")){
filedir.write("./http_config.json","{\"port\": "+port+",\"files\": [\"./dist/**/*.{html,htm,css,js}\"],\"server\": { \"baseDir\": \"./dist\" }}")
}
网友评论