最近闲游时间比较多,于是想搞个网站练练手,首先选域名在godday里选了个518shengmao.com,买了个1元的阿里云服务器,接下来程序了。

采用vue+nodejs来开发的

一、NodeJs环境安装与配置

关于什么是NodeJs就不详细介绍,简要说明,它就是用javascript 方式去操作系统资料的一个开发环境。是一个桥梁平台。

大家可以去官网下载最新版本的,安装后进行环境变量的配置。

下载》  NodeJs  选择左边绿的下载安装就可以

关于环境变量的配置,百度搜索很多, 点击这里去看看吧

二、gulp安装与使用

首先,gulp是基于nodejs 平台开发出来的,进行对静态资源的打包与发布的前端开发工具之一。当然也有webpack等等一些打包工具。

由于是基于nodejs 所以,我们用npm 来进行 对gulp的安装。(npm 是包管理器,现在一般安装完nodejs就会自己带上)。

npm 一般是从国外下载包,所以想快点下载的话,可以镜像切换。如何切换,点击这里《npm镜像切换》

当然还有直接使用,cnpm(这个是淘宝为国内打造的一个镜像),可以通过npm 去安装cnpm 就可以了。

nodejs开发必不可少的就是package.json(它就是用来管理,通过npm 或cnpm 下载的包与发布包的一些配置)。

所以,我们要建一个package.json包,并指明一些配置,关于它的每项配置说明大家可以自己找一下资料,很多的。

现在看一下简要package.json如下:

{
"name": "typing-src",
"realname": "typing-ui",
"version": "2.0.1",
"scripts": {
"build": "gulp",
"watch": "gulp watch"
},
"author": [
"admin <admin@91uu.net>"
],
"homepage": "https://www.91uu.net",
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0 ",
"gulp-header": "^1.8.8",
"gulp-if": "^2.0.1",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^1.5.4",
"gulp-zip": "^4.0.0"
},
"dependencies": {
"gulp-html-replace": "^1.6.2",
"gulp-minify-html": "^1.0.6",
"gulp-processhtml": "^1.2.0",
"gulp-util": "^3.0.8"
}
}
建好了之后,我们通过cmd 指定到package.json 这个目录 ,在命令行工具执行cnpm install 就可以安装相关的依懒包了。

那这个也是我们后面要写gulpfile.js文件做准备,其中scripts这个选项是后面我们要执行打包的命令。

为什么一定要gulpfile.js文件名,因为gulp命令自动会读取这个默认文件。

接下来创建一个gulpfile.js文件,内容如下:

var pkg = require('./package.json');
//获取参数
var argv = require('minimist')(process.argv.slice(2), {
default: {
ver: 'all'
}
})
,resourcesPatch = '你要打包的读取的目录'
,outPath = resourcesPatch+'dist/'
,outStaticPath = outPath+'目录1/'
,outTplPath = outPath+'templates/'
,staticPath = resourcesPatch+'目录1/'
//发行版本目录
,releaseDir = './' + pkg.version
,release = releaseDir

//目标木
,destDir = function(ver){
return ver ? release : function(){
return argv.rc ? 'rc' : 'dist'
}();
};

var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var minifyhtml = require('gulp-minify-html');
var htmlreplace = require('gulp-html-replace');
//var processhtml = require('gulp-processhtml');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var header = require('gulp-header');
var del = require('del');
var gulpif = require('gulp-if');
var minimist = require('minimist');
var zip = require('gulp-zip');

//注释
var note = [
'/** <%= pkg.realname %>-v<%= pkg.version %> <%= pkg.license %> License By <%= pkg.homepage %> */\n <%= js %>'
,{pkg: pkg, js: ';'}
];
/*
* 读取目录文件并创建打包任务,递归读取
*/
var creatTasks = function (ops) {
var doDir=ops.doDir,type=ops.type;
var files = fs.readdirSync(doDir),tasks=[],item,dir;
for(var i=files.length-1;i>=0;i--){
if(fs.statSync(path.join(doDir, files[i])).isDirectory()){
tasks.concat(creatTasks({
doDir:doDir+files[i]+'/',
ver:ops.ver,
uirPath:ops.uirPath,
outDir:ops.outDir,
type:ops.type
}));
}else{
item=gulp.src(doDir+files[i]).pipe(type=="js"?uglify():minify({
compatibility: 'ie7'
}))
//.pipe(header.apply(null, note))//这个会影响有@charset "utf-8"; 的样式问题
.pipe(gulp.dest(ops.outDir+doDir.replace(ops.uirPath,'/')));
tasks.push(item);
};
}
return tasks;
};

var taskList = {
web_js:function(ver) {
let uirPath = staticPath +'/web/js/';
let dir = destDir(ver);
let outDir = outStaticPath +'/'+ dir+'/web/js/';
let tasks = creatTasks({
doDir:uirPath,
ver:ver,
uirPath:uirPath,
outDir:outDir,
type:'js'
});
return merge(tasks);
}
,web_css:function(ver) {
let uirPath = staticPath +'/web/css/';
let dir = destDir(ver);
let outDir = outStaticPath + dir+'/web/css/';
let tasks = creatTasks({
doDir:uirPath,
ver:ver,
uirPath:uirPath,
outDir:outDir,
type:'css'
});
return merge(tasks);
}
,common_js_modules:function(ver) {
let uirPath = staticPath +'/common/js/modules/';
let dir = destDir(ver);
let outDir = outStaticPath +dir+'/common/js/modules/';
let tasks = creatTasks({
doDir:uirPath,
ver:ver,
uirPath:uirPath,
outDir:outDir,
type:'js'
});
return merge(tasks);
}
//有些资源不打包,但是要复制到对应目录
,copy_commonJsLib:function(ver){
let uirPath = staticPath +'/common/js/lib/**/*';
let dir = destDir(ver);
let outDir = outStaticPath+ dir+'/common/js/lib/';
return gulp.src(uirPath).pipe(gulp.dest(outDir));
}
}
//添加任务
gulp.task('web_js', taskList.web_js);
gulp.task('web_css', taskList.web_css);
gulp.task('copy_webCssIcon', taskList.copy_webCssIcon);
gulp.task('copy_webImages', taskList.copy_webImages);

//清理
gulp.task('clear', function(cb) {
return del(['./'+ (argv.rc ? 'rc' : 'dist') +'/*'], cb);
});
gulp.task('clearRelease', function(cb) {
return del([outStaticPath+releaseDir,outTplPath+releaseDir], cb);
});
//这里是监控文件变动打包
gulp.task('watch',function(){
gulp.watch(staticPath+'/web/css/**/*.css',['web_css']);
gulp.watch(staticPath+'/web/js/**/*.js',['web_js']);
gulp.watch(staticPath+'/web/images/**/*.{png,jpg,gif}',['copy_webImages']);
});
//发行版 gulp
gulp.task('default', ['clearRelease'], function(){
for(var key in taskList){
taskList[key]('open');
}
});

最后大家就可以执行一下npm run build 就可以了。
---------------------
作者:前端开发工程师
来源:CSDN
原文:https://blog.csdn.net/caibinghong/article/details/85228398
版权声明:本文为博主原创文章,转载请附上博文链接!

对www.518shengmao.com站资源打包,采用vue Node.js的更多相关文章

  1. 减少打包组件vue.config.js——Webpack的externals的使用

    vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...

  2. 前端资源多个产品整站一键打包&包版本管理(一)

    来新公司工作的第五个月.整站资源打包管理也提上了日程. 问题: 首先.什么是整站的打包管理呢? 我们公司的几个重要产品都在同一个webapp里面,但是,不同的开发部门独立开发不同的产品,长期以来,我们 ...

  3. 用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现!

    昨天买了一个服务器想着用来测试一些自己的项目,由于是第一次建站,在tomcat,linux,node.js间想了好久.最终因为node搭建比较方便没那么麻烦就决定用node.js来搭建网站项目. 搭建 ...

  4. 最新Node.js 资源汇总

    Node.js 资源汇总 文档 Node.js 官方文档:http://nodejs.org/api/ Node.js 中文文档:http://nodejs.jsbin.cn/api/ Express ...

  5. 实用的 Node.js 教程,工具和资源

    这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...

  6. 跟我从零基础学习Unity3D开发--资源打包篇(AssetBundle)

    好久没更新了,一直在加班敢项目进度.这里和关注我的博客的童鞋表示一下歉意!这里有我录的Unity3D从零开始的视频教程大家可以关注一下:http://www.imooc.com/view/555  视 ...

  7. AssetBundle系列——游戏资源打包(一)

    将本地资源打包,然后放到资源服务器上供游戏客户端下载或更新.服务器上包含以下资源列表:(1)游戏内容资源assetbundle(2)资源维护列表,包含每个资源的名字(完整路径名)和对应的版本号[资源名 ...

  8. [Unity Asset]AssetBundle系列——游戏资源打包

    转载:http://www.cnblogs.com/sifenkesi/p/3557231.html 将本地资源打包,然后放到资源服务器上供游戏客户端下载或更新.服务器上包含以下资源列表:(1)游戏内 ...

  9. 将SWF文件用作资源打包

    使用Flash开发网页游戏少不了与各种美术资源打交道.对于静态资源的那就是各种图片,对于会动的资源可以考虑直接做成swf.制作成swf的美术资源又可以分为两种:一种是直接将关键帧罗列在主时间轴上,那么 ...

随机推荐

  1. 2018-2019-2 《网络对抗技术》Exp6 信息搜集与漏洞扫描 20165326

    信息搜集与漏洞扫描 实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 基础知识 间接:不接触目标,无直接连接访问,使用辅助模块进行收集分析 DNS:执行各种相关查询 搜索引擎 直接:建立逻辑连 ...

  2. Spark笔记

    Spark基础 第一节:什么是Spark?Spark的特点和结构 1.什么是Spark? Spark是一个针对大规模数据处理的快速通用引擎. 类似MapReduce,都进行数据的处理 2.Spark的 ...

  3. sql server存储过程,常用的格式

    BEGINSET NOCOUNT ON;if @_MODE NOT IN ('A','M','D') begin raiserror('参数错误!',16,3); return; end; decla ...

  4. Sonar 平台搭建及 Sonar 自定义规则打包部署篇

    引言 基于阿里开发手册的sonar自定义插件工程 开源地址: https://github.com/tigerge000/sonar-java-custom-rules.git由于最近来问童鞋,就算写 ...

  5. dubbo could not get local host ip address will use 127.0.0.1 instead 异常处理

    dubbo could not get local host ip address will use 127.0.0.1 instead 查看hostname localhost:spring wls ...

  6. Centos中MySQL数据的备份和恢复

    1.MySQL数据备份 MySQL在Centos备份中用到了mysqldump这个文件,首先得把它找出来: [root@instance-3snz20bz ~]# whereis mysqldump ...

  7. 开始Python学习

    主要结合ArcGIS进行空间数据处理 Python最讨厌的就是版本问题了 ArcGIS 10.5安装的时候已经安装了python2.7.13,但后来又安装了python3.6.1. 环境变量的设置: ...

  8. 学习Linux下的文件目录管理

                    文件目录管理 一.认识Linux文件系统的架构 在Linux中是没有盘符这个概念的,即Linux中没有C盘和D盘的分盘.那么我们直接通过对目录的操作实现对磁盘的读写,因 ...

  9. 41.找出所有和为S的连续正数序列

    小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和, 他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数). 没多久,他就得到 ...

  10. C#中扩展方法的使用

    MSDN中这样定义扩展方法:扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用. ...