对打字练的小键人的网站91xjr.com站资源打包，gulp独立分文件夹打包

dazi.91xjr.com 是如何打包资源文件呢。

基本的环境准备工作如下：本节以(window 7下操作)

1、NodeJs环境安装与配置

2、gulp下载与使用

一、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 就可以了。

对打字练的小键人的网站91xjr.com站资源打包，gulp独立分文件夹打包相关推荐

一个网站拿下机器学习优质资源！搜索效率提高 50%
\ 现在大家平时会遇到很多不错的机器学习资源,但是大多数情况下,资源比较分散,不方便集中管理和查阅.更重要的是往往很难找到一个系统完整的资源导航,形成系统的学习路线,方便搜索. 重磅!今天小编在网上& ...
推荐一个网站拿下机器学习优质资源！搜索效率极大提高
\ 现在大家平时会遇到很多不错的机器学习资源,但是大多数情况下,资源比较分散,不方便集中管理和查阅.更重要的是往往很难找到一个系统完整的资源导航,形成系统的学习路线,方便搜索. 重磅!今天小编在网上& ...
[网站搭建] 阿里云虚拟主机搭建及FTP文件上传
写这篇文章主要有两个原因:一方面是得到了阿里云的一个"开通码",另一方面是最近给学生们上网站制作的课程,想把学生们提交的作业上传到服务器上去,让他们体会一下自己做的东西,提升他们的 ...
添加ASP.NET网站资源文件夹
ASP.NET应用程序包含7个默认文件夹,分别为Bin.APP_Code.App_GlobalResources.App_LocalResources.App_WebReferences.App_Br ...
c++ 获取文件夹创建时间_手把手教学免费创建个人网站
点击蓝字关注我们可以不成材不能不成长! 给大家分享一个非常有用的skill--在GitHub上免费创建个人网站. 什么是GitHub GitHub是一个面向开源及私有软件项目的托管平台,因为只 ...
php文件夹转换网页,PHP转换文件夹下所有文件的编码适合发布网站的其他编码版本...
PHP转换文件夹下所有文件的编码适合发布网站的其他编码版本比如你有一个GBK版本你想有一个UTF8版本或者你只有GBK的源码你想二次开发但是你不想改变IDE的编码方式你可以用这个程序将其 ...
Qt工作笔记-进入文件夹或打开网站（QDesktopServices::openUrl的使用）
QDesktopServices::openUrl这个是个神器,通过URL可以打开本地的文件夹或某一个web网站还是截张图把: widget.h #ifndef WIDGET_H #define W ...
将远程计算机上的文件夹,如何将现有网站上虚拟目录创建到驻留在远程计算机上的文件夹...
如何将现有网站上虚拟目录创建到驻留在远程计算机上的文件夹 09/27/2020 本文内容本文介绍如何将现有网站上虚拟目录创建.测试和删除到驻留在远程计算机上的文件夹. 适用于: Windows S ...
asp.net 网站模板怎么用，就是16aspx上面下下来的模板，里面有个sln文件，其他全是文件夹的东西...
asp.net 网站模板怎么用,就是16aspx上面下下来的模板,里面有个sln文件,其他全是文件夹的东西 .net写的程序模板一般都被写死了.那样只有通过程序改了. posted on 2017-0 ...
cms php vue 开源_2020最受欢迎的企业网站CMS建站系统排行榜
对于大多数站长来说,企业网站CMS可能再熟悉不过了.但对于新手站长来讲,可能还不太了解什么是企业网站CMS,或企业网站CMS是做什么的.而我们经常可以在网上看见有人问:哪个CMS系统最好用?企业建站用 ...

对打字练的小键人的网站91xjr.com站资源打包，gulp独立分文件夹打包

对打字练的小键人的网站91xjr.com站资源打包，gulp独立分文件夹打包相关推荐

最新文章

热门文章