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