dazi.91uu.net 是如何打包资源文件呢。
基本的环境准备工作如下:本节以(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如下:
建好了之后,我们通过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 就可以了。
相关推荐
gulp打包及发布静态资源流程
该项目主要介绍了响应式开发设计,设计知识点有:H5新增标签、媒体查询、尺寸单位选择px/em/rem、浏览器兼容性调试、http-server、广告轮播插件、项目打包上线等等,源代码分为gulp打包版与未打包版。两种版本采用...
利用gulp打包工具
基于gulp打包的vue单页
gulp打包js,min.js,d.ts等
gulp 的一些用法 css、js、img打包合并压缩
此项目为一个简单的gulp打包项目,可供刚入门同学学习使用。使用到了nodejs、sass、gulp等基础知识,
基于layui框架使用gulp工具搭建的后台模板
因为之前一直有人给我推荐gulp,说他这里好哪里好的。实际上对我来说够用就行。grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受。不过不管怎么说...
gulp-size, 显示项目的大小 gulp大小 显示项目的大小 记录流中文件的总大小和可选的单个文件大小。安装$ npm install --save-dev gulp-size用法const gulp = require('gu
默认情况下,gulp.dest保留通过管道传递的文件的所有子文件夹结构。 因此,您可以使用此模块获取如下结构: └── js ├── app.js ├── helper.js └── vendor ├── jquery.js └── bootstrap.js ...
gulp-svg-精灵脚本Gulp 插件将单独的 svg 图标打包到可缓存的脚本中。 документ .安装 npm install git://github.com/Ser-Gen/gulp-svg-sprite-script.git如何使用选项插件使用模板和生成脚本。 您可以使用...
gulp配置 gulp配置
gulp打包项目,css、js自动添加版本号,防止缓存,http-proxy-middleware代理,改变图片,css,js,html,browserSync自动更新,前后端分离
主要给大家介绍了关于gulp实现人一个打包合并的方法教程,并分享了gulp打包js/css时合并成一个文件时的顺序的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
gulp编译文件、gulp编译项目
该包是gulp的项目插件包,使用时需将该包解压至项目的根目录下。 之后配置好系统全局gulp,就可以使用了。 包含的gulp插件如下: "gulp": "^3.9.1", "gulp-concat": "^2.6.0", "gulp-htmlmin": "^2.0.0", "gulp-...
angular2+webpack+gulp构建应用,基于angular2正式版,页面按需加载js,整体打包工程,包括webpack组件打包,gulp文件处理。angular2项目脚手架。.zipangular2+webpack+gulp构建应用,基于angular2正式版,页面按需...
gulp教程,详细教你gulp的使用方法 gulp是在webpack之前非常流行的前端自动化打包工具 今天一步一步教你怎么使用gulp来编写前端自动化脚本
gulp-pangu 是 Gulp 扩展,可以在中文与英文之间添加空格字符。 var pangu = require('gulp-pangu');安装$ npm install --save-dev gulp-pangu使用// include the required packages.var gulp = ...