本次更新大幅度精简了代码，修复了copy文件的bug,去掉了一些没用的npm包
而且新增了浏览器热更新
命令依然是
1 npm install
2 npm run dev
基本架构就是 src是开发文件夹 dist是生产文件夹
package.json
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"predev": "echo '开始创建并初始化'",
"css": "postcss -w ./src/css/*.css -d ./dist/css",
"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",
"httpserver": "cd dist&&browser-sync start --server --files \"css/*.css, js/*.js, *.html\" "
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.2.1",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.18.13",
"chalk": "^2.3.0",
"chokidar": "^1.7.0",
"cp-file": "^5.0.0",
"cross-var": "^1.1.0",
"cssnano": "^3.10.0",
"filedir": "^1.0.1",
"npm-run-all": "^4.1.2",
"postcss-cli": "^4.1.1",
"shelljs": "^0.7.8",
"uglify-js": "^3.2.1"
},
"dependencies": {}
}
create.js
var chokidar = require('chokidar');
var fs = require("fs");
var http = require('http')
var filedir=require("filedir");
var path = require("path");
var shelljs=require("shelljs")
var chalk=require("chalk")
var http = require("http");
var fs = require("fs");
var request = require('request');
//
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("因为已经有"+this_[i].src+",故不会再创建"))
continue
}
if(te_name=="html"&&!(filedir.isFile(this_[i].src)) ){
console.log(chalk.green(this_[i].text));
fs.writeFileSync(this_[i].src,
"<!DOCTYPE html>\n"+
"<html lang=\"en\" style='height:100%;position:relative'>\n"+
"<head>\n"+
"<meta charset=\"UTF-8\">\n"+
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n"+
"<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n"+
"<title>Document</title>\n"+
"<link rel=\"stylesheet\" href=\"./css/main.css\">"+
"</head>\n"+
"<body style='height:100%;position:relative'><div class='logobox' style='width:600px;height:425px;position: absolute;left: 0;right: 0;margin: auto;top: 50%;margin-top: -212px;'><img style='max-width:100%' src='https://s1.ax1x.com/2017/12/14/qjYxe.md.jpg'><h5 style='text-align:center;line-height:90px;font-size: 45px;color:gray'>Welcome to use</h5></div></body>\n"+
"</html>\n"
)
continue
}else{
console.log(chalk.green(this_[i].text));
fs.mkdirSync(this_[i].src);
}
if(for_css=="css"&&i=="src_css"){
fs.writeFileSync("./src/css/main.css",
"*{padding:0;margin:0}\n"+
"a{text-decoration:none}\n"+
"ul,ol{list-style:none}\n"+
"img{border:none}\n"+
"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' }),],}")
}
console.log(chalk.cyan(
"-------------------\n"+
"所有文件初始化完毕完毕\n"+
"-------------------\n"
))
//===============================================================================================
console.log(chalk.cyan(
"-------------------\n"+
"等待监听启动,open Browser...\n"+
"-------------------\n"
))
//===============================================================================================
shelljs.exec("npm-run-all --parallel html_images_watch css httpserver ES6")
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")
var cpFile = require('cp-file');
function copy_(src){
// var filePath = path.resolve();
if(src.indexOf(".")!=(-1)){ //如果名字带.表示添加的是文件
var tem=src.replace(/src/,"dist");
cpFile(src, tem)
//filedir.copy(src, tem)
}
}
function delete_(src){
if(src.indexOf(".")!=(-1)){ //如果名字带.表示添加的是文件
var tem=src.replace(/src/,"dist");
filedir.del(tem)
}
}
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+"文件"))
copy_(path)
})
.on('addDir', function(path) {
})
.on('change', function(path) {
console.log(chalk.yellow("您改变了"+path+"文件"))
copy_(path)
})
.on('unlink', function(path) {
console.log(chalk.yellow("您删除了"+path));
delete_(path)
})
.on('unlinkDir', function(path) { })
.on('error', function(error) { log('Error happened', error); })
.on('ready', function() { })
.on('raw', function(event, path, details) { })
网友评论