标签:tip 打包 oba comment 执行 zip tor dir chrome
安装:npm install --global gulp 全局安装
npm install -save-dev gulp 项目的开发依赖
在项目根目录下创建一个名为gulpfile.js
var gulp=require(‘gulp’);
Gulp.task(‘default’,function(){
//任务代码
});
gulp 执行。
-v 或 --version 会显示全局和项目本地所安装的 gulp 版本号
--require <module path> 将会在执行之前 reqiure 一个模块。这对于一些语言编译器或者需要其他应用的情况来说来说很有用。你可以使用多个--require
--gulpfile <gulpfile path> 手动指定一个 gulpfile 的路径,这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录
--cwd <dir path> 手动指定 CWD。定义 gulpfile 查找的位置,此外,所有的相应的依赖(require)会从这里开始计算相对路径
-T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树
--tasks-simple 会以纯文本的方式显示所载入的 gulpfile 中的 task 列表
--color 强制 gulp 和 gulp 插件显示颜色,即便没有颜色支持
--no-color 强制不显示颜色,即便检测到有颜色支持
--silent 禁止所有的 gulp 日志
1、全局安装gulp
npm install -g gulp
2、项目下安装gulp和gulp-uglify
cmd切换到项目目录,执行npm install gulp和npm install gulp-uglify
3、安装完毕后,项目的gulp文件夹下,新增文件gulpfile.js(注意该文件名不可更改),并在gulpfile.js文件中写入代码。
4、执行:(gulp + task名,如果为default,直接执行gulp即可)
当你有一个静态文件夹的时候,想要对它进行压缩打包,要先
1.cmd进入到该目录下,安装package.json文件.安装方法是 npm init 就安装成功了。
这个办法叫指令办法,另外一个办法是通过npm安装,方法:
npm install --save-dev或者:npm install
--save是保存配置信息至package.json(package.json是nodejs的配置文件)
-dev是保存至package.json的devDependences节点下面,不指定-dev会保存至dependencies下面
为什么要保存至package.json?
因为nodejs非常庞大,保存至package.json文件会有利于版本管理,同时,方便其他的开发者,可以直接进行下载即可。
一点gulp教程:http://www.ydcss.com/archives/18#why
Gulp在github地址:
https://github.com/Platform-CUF/use-gulp
Gulp插件网:
Npm官网:
如何找npm能搜到的东西,比如查找gulp的所有插件,在npm官网上的搜索框,输入gulp,搜索。
总结一些常用的gulp插件名称以及它的用法。
参考博客:
https://www.cnblogs.com/Darren_code/p/gulp.html
Glob格式,http://www.jianshu.com/p/ce7cf53274bb,glob格式。
匹配规则
不同语言的 glob 库支持的规则会略有不同。下面是 node-glob 的匹配规则。
* 匹配任意 0 或多个任意字符
? 匹配任意一个字符
[...] 若字符在中括号中,则匹配。若以 ! 或 ^ 开头,若字符不在中括号中,则匹配
!(pattern|pattern|pattern) 不满足括号中的所有模式则匹配
?(pattern|pattern|pattern) 满足 0 或 1 括号中的模式则匹配
+(pattern|pattern|pattern) 满足 1 或 更多括号中的模式则匹配
*(a|b|c) 满足 0 或 更多括号中的模式则匹配
@(pattern|pat*|pat?erN) 满足 1 个括号中的模式则匹配
** 跨路径匹配任意字符
https://www.npmjs.com/package/gulp-htmlmin
npm i gulp-htmlmin --save-dev
例子:
var gulp=require(‘gulp’)
var htmlmin=require(‘gulp-htmlmin’)
Gulp.task(‘minifyhtml’,function(){
gulp.src(‘src/*.html’)
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(‘dest’))
})
https://www.npmjs.com/package/gulp-imagemin
$ npm install --save-dev gulp-imagemin
const gulp = require(‘gulp‘);
const imagemin = require(‘gulp-imagemin‘);
gulp.task(‘default‘, () =>
gulp.src(‘src/images/*‘)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/images‘)));
Minify files with UglifyJS.
Gulp压缩js是利用Uglifyjs插件进行压缩的,所以要详细了解配置参数,需要查询关键词“Uglifyjs”搜索。网址:http://lisperator.net/uglifyjs/
Github网址:https://github.com/mishoo/UglifyJS2有参数说明。
参数说明中文翻译文档segmentfault总结网址:https://segmentfault.com/a/1190000008995453
Gulp过滤文件,是用语法!,排除已经压缩过的.min.css
用glob格式。
过滤文件,比如.min.js结尾的文件
例子:
var condition = function(f){
if(f.path.endswith(‘.min.js‘)){
return false;
}
return true;
};
gulp.task(‘jsmin‘, function (cb) {
return gulp.src([SRC_DIR+‘/**/*.js‘])
.pipe(sourcemaps.init())
.pipe(gulpif(condition, uglify({mangle: {except: [‘require‘ ,‘exports‘ ,‘module‘ ,‘$‘]}}))) //排除混淆关键字
.pipe(sourcemaps.write(‘.‘))
.pipe(gulp.dest(DEST_DIR));
});
gulp-if:可以完美解决问题,且足够优雅。
gulp-filter:可以完美解决问题,但是相比gulp-if略显麻烦。更复杂的场景下用gulp-filter比gulp-if方便。
gulp-ignore:更为强大的过滤,在仅仅只是过滤而不拷贝的情况下首推。
gulp plugin to minify CSS, using clean-css
安装:npm install gulp-clean-css --save-dev
let gulp = require(‘gulp‘);
let cleanCSS = require(‘gulp-clean-css‘);
gulp.task(‘minify-css‘, () => {
return gulp.src(‘styles/*.css‘)
.pipe(cleanCSS())
.pipe(gulp.dest(‘dist‘));
});
var gulpif = require(‘gulp-if‘);
var uglify = require(‘gulp-uglify‘);
var condition = true; // TODO: add business logic
gulp.task(‘task‘, function() {
gulp.src(‘./src/*.js‘)
.pipe(gulpif(condition, uglify()))
.pipe(gulp.dest(‘./dist/‘));
});
例子2:
var gulpif = require(‘gulp-if‘);
var uglify = require(‘gulp-uglify‘);
var beautify = require(‘gulp-beautify‘);
var condition = function (file) {
// TODO: add business logic
return true;
}
gulp.task(‘task‘, function() {
gulp.src(‘./src/*.js‘)
.pipe(gulpif(condition, uglify(), beautify()))
.pipe(gulp.dest(‘./dist/‘));
});
If(condition返回true){
uglify()
}else{
beautify()
}
作用如上解释。
例子:
var rename = require("gulp-rename");
//1 rename via string
gulp.src("./src/main/text/hello.txt")
.pipe(rename("main/text/ciao/goodbye.md"))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md
//2 rename via function
gulp.src("./src/**/hello.txt")
.pipe(rename(function (path) {
path.dirname += "/ciao";
path.basename += "-goodbye";
path.extname = ".md"
}))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md
//3 rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
.pipe(rename({
dirname: "main/text/ciao",
basename: "aloha",
prefix: "bonjour-",
suffix: "-hola",
extname: ".md"
}))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md
安装:$ npm install --save-dev gulp-rev
Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css
主要是css文件
只有当文件内容有改变的时候,hash值会变,不然第一次打包与第二次打包的hash值是不变的。生成的hash不会主动替换到文件引用中,别的文件名会带hash,src执行的html文件不带,rev-replace后html胡=会带,所以要rename,引用带hash,需要使用rev-place。
实例代码:
const gulp = require(‘gulp‘);
const rev = require(‘gulp-rev‘);
gulp.task(‘default‘, () =>
gulp.src(‘src/**/*.css‘) // src目录下面的所有以.css结尾的css文件
.pipe(rev()) // 加hash值
.pipe(gulp.dest(‘dist‘)) //src目录下面的所有以.css结尾的css文件加完hash输出到dist目录下面
.pipe(rev.manifest()) //创建一个资源对照文件rev-manifest.json
.pipe(gulp.dest(‘dist‘))//rev-manifest.json输出到dist目录下
);
//1.src/*.css:指src的直接子目录,没有的话,也不会有dist目录;
//2.src/**/*.css能匹配到src下面所有以.css结尾的文件
//rev()作用是名字前加hash
Gulp-rev生的hash,没有替换到对应的文件,所有用这个替换掉。
但是html文件也替换了,所以要rename,都是一连串的产生问题,解决问题。
<!-- build:js vendor.js -->
<!-- build:js dist-rjs/js/vendor.js -->
<script type="text/javascript" src="../js/index.js"></script>
<!-- /build -->
<!-- endbuild -->
gulp.src(‘src/**/*.html‘,{base:‘.‘}) //找到指定的文件html
.pipe(useref())
.pipe(gulp.dest(‘dist‘)) //输出到dist目录下面
结果会:
在dist目录下面出现 dist-rjs/js/vendor.js这种结构得文件和文件夹,
vendor.js和 src="../js/index.js"一模一样。html会变成这样
<script type="text/javascript" src="dist-rjs/js/vendor.js"></script>
以下理解是错误的。
作用是讲html文件中的css或者js引用文件的href属性的值改变成你要填的值。
例子:
var gulp = require(‘gulp‘),
useref = require(‘gulp-useref‘),
gulpif = require(‘gulp-if‘),
uglify = require(‘gulp-uglify‘),
minifyCss = require(‘gulp-clean-css‘);
gulp.task(‘html‘, function () {
return gulp.src(‘app/*.html‘)
.pipe(useref())
.pipe(gulpif(‘*.js‘, uglify()))
.pipe(gulpif(‘*.css‘, minifyCss()))
.pipe(gulp.dest(‘dist‘));
});
这段解读是:app文件夹下面的html文件中的js后者css文件的href或者src指定路径的值给换成你自己指定的内容,只起到换内容的作用,即换引用路径。
转换前:
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>
转换后:
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
<script src="scripts/combined.js"></script>
</body>
</html>
安装:
Npm install --save-dev gulp-processhtml
我认为与gulp-useref的作用有点类似,但是又有点差别。我认为gulp-processhtml在html页面上能识别的是<!-- build:js vendor.js --><!-- /build -->以/build结尾的。不能识别endbuld结尾的。
Gulp-processhtml总结:(不喜欢用)
1,只能识别以/build结尾的html里面的。如:<!-- build:js vendor.js --><!-- /build -->
如:
gulp.task(‘default‘, () =>
gulp.src(‘src/html/index.html‘,{base:‘.‘})
.pipe(processhtml())
.pipe(gulp.dest(‘dist‘))
);
这段代码就只能产出:/src/html/index.html,,,,,独这一个文件。只是script标签有build的地方的src被替换了。仅仅起到了替换src地址的作用。
Gulp-useref总结:(喜欢用)
如:
gulp.task(‘default‘, () =>
gulp.src(‘src/html/index.html‘,{base:‘.‘})
.pipe(useref())
.pipe(gulp.dest(‘dist‘))
);
产出物是:/src/html/index.htnl,/src/dist-js/js/cendor.js,
<!-- build:css css/css.css inline -->
<link rel="stylesheet" type="text/css" href="../css/index-1.css">
<link rel="stylesheet" type="text/css" href="../css/index-2.css">
<link rel="stylesheet" type="text/css" href="../fonts/iconfont/iconfont.css">
<!-- endbuild -->
还会将这多行css进行合并,生成到/src/css/css.css.
安装:npm install --save-dev gulp-autoprefixer
“一点”资料:http://www.ydcss.com/archives/94
使用前图:
使用后图:
Windows开发人员手册:
https://msdn.microsoft.com/zh-cn/library/hh757293(v=vs.85).aspx
https://msdn.microsoft.com/zh-cn/library/hh757293(v=vs.85).aspx
gulp-connect实现网页热加载,实现网页自动刷新。不用,略。
例子:
//清理dist目录
gulp.task(‘cleanDist‘, function(){
return gulp.src(‘dist‘)
.pipe(clean({force: true}));
});
//清理 temp file/folder
gulp.task(‘cleanTmpFile‘, function(){
return gulp.src([‘dist-rjs‘, ‘src/vendor.js‘, ‘src/common.js‘, ‘src/navMenus.js‘, ‘src/appUrls.js‘])
.pipe(clean({force: true}));
});
意思是将兄弟节点dist-rjs全部删除,还有兄弟节点src下面的4个js文件删除。
Run a series of gulp tasks in order.
例子:
var gulp = require(‘gulp‘)
var gulpSequence = require(‘gulp-sequence‘)
gulp.task(‘test‘, gulpSequence([‘a‘, ‘b‘], ‘c‘, [‘d‘, ‘e‘], ‘f‘))
只有这个命令的话,没有进行压缩,进行了合并,进行命名。
例如这段:
gulp.task(‘js‘, function(){
return gulp.src(config.js,{base:‘.‘})
.pipe(uglify({
mangle: false}))
.pipe( concat( "app.min.js" ) )
.pipe(gulp.dest(‘dist-rjs/build_home‘));
});
意思是:对gulpfile.js的兄弟config.js进行uglify压缩,(//mangle: true,//类型:Boolean 默认:true 是否修改变量名 )false就是不修改变量名,然后命名为app.min.js输出到dist-rjs/build_home目录下面
说明:多个文件的时候用数组,一个文件的时候直接‘aaa’就可以了,gulp-concat只进行合并和重命名,没进行压缩。
安装npm install --save-dev gulp-inject
如图:合并使用,<!-- inject:js --><!-- endinject -->这是一对,先注入js文件,再buld。
Html页面:
Gulpfile.js的使用地方:
var sources = gulp.src([‘testconcat.css‘, ‘testautoprefixer.css‘], {read: false});
gulp.task(‘default‘, () =>
gulp.src(‘src/html/index.html‘,{base:‘.‘})
.pipe(inject(sources))
.pipe(gulp.dest(‘dist‘))
);
替换前:
替换后:
inject标签没有消失掉,只做了src的路径替换。不会拷贝文件到dist目录,而且如果html中的innject里面之前包裹了资源,执行后,这些资源会不存在了,被替换掉了。
原有被替换,原没有则增加新增资源。
var zip = require(‘gulp-zip‘);
例子:
//将dist目录压缩打包
gulp.task(‘zip‘, function() {
return gulp.src(‘dist/**/*‘)
.pipe(zip(‘dist.zip‘))
.pipe(gulp.dest(‘dist‘));
});
var modifyCssUrls = require(‘gulp-modify-css-urls‘);
源码是:
gulp.task(‘default‘, () =>
gulp.src(‘src/html/index.html‘,{base:‘.‘})
.pipe(gulpif(‘*.css‘, cleanCSS()))
.pipe(gulpif(‘*.css‘,modifyCssUrls({
//把类似‘../images/test.png‘的路径修改为‘images/test.png‘,
//执行之前需要先做cleanCSS,执行后也需要做
modify: function(url, filePath){
if(url.indexOf(‘../‘) == 0 && url.lastIndexOf(‘../‘) > -1){
return url.slice(url.lastIndexOf(‘../‘)+1);
}
else{
return url;
}
}
})))
.pipe(gulpif(‘*.css‘, cleanCSS()))
.pipe(gulp.dest(‘dist‘))
);
很有必要用处很大。
美工在写页面的时候,一个class的background-url(images/test.png)
加1 ../images/test.png======》images/test.png
+3 ../../../images/test.png======>images/test.png
方法内容自定义,大致也就这个用途了。
安装:npm install gulp-cdnify --save-dev
参数1:base
参数2:html
参数3:rewriter方法,url是htmlcss里面的路径,对特殊url进行特殊处理,自定义
Process是node参数
如:gulp cdnDist --prod,prod就是gulp的参数
process.argv[3];//0:node 1:gulp 2:cdnify 3:param
关于node获取gulp参数再查一下
var cdnify = require(‘gulp-cdnify‘);
rewriter: function(url, process) {
if (/eot]ttf|woff|woff2/.test(url)) {
return ‘http://myfontcdn.com/‘ + url;
} else if (/(png|jpg|gif)$/.test(url)) {
return ‘http://myimagecdn.com/‘ + url;
} else {
return process(url);
}
}
见实例:
function readCdnUrl(env){
if(env.indexOf(‘prod‘) > 0){
config.ol_investor_cdnUrl = ‘//cdn.chinaclear.cn/siteResource/online-investor/‘;
config.shared_web_components_cdnUrl = ‘//cdn.chinaclear.cn/siteResource/shared-web-components/‘;
}
else{
config.ol_investor_cdnUrl = ‘//wxportal3.test.chinaclear.cn/siteResource/online-investor/‘;
config.shared_web_components_cdnUrl = ‘//wxportal3.test.chinaclear.cn/siteResource/shared-web-components/‘;
}
}
//将html、css中引用资源路径全部替换成cdn路径
gulp.task(‘cdnify‘, function () {
readCdnUrl(process.argv[3]);//0:node 1:gulp 2:cdnify 3:param
return gulp.src([‘dist/**/*.{css,html}‘, ‘!dist/src/lib/**/*‘])
.pipe(cdnify({
base: config.ol_investor_cdnUrl,
html: {
‘link[rel="shortcut icon"]‘: ‘href‘,
},
rewriter: function(url, process){
if(/^\//.test(url)){
if(url.indexOf(‘/pop-shared-web-components‘) == 0){
return config.shared_web_components_cdnUrl + url.slice(‘/pop-shared-web-components‘.length + 1);
}
//以/开头的绝对路径去掉/
return process(url.slice(1));
}else if(url.indexOf(‘../‘) == 0 ){
//以连续../开头的相对路径去掉开头所有../
return process(url.slice(url.lastIndexOf(‘../‘)+3));
}else{
return process(url);
}
}
}))
.pipe(gulp.dest(‘dist/‘))
});
相同代码,截图如:
比如执行gulp test
如果需要获取test,使用命令process.argv即可
如果执行gulp test --module aaaa,这句话表示的意思执行gulp test,顺带参数module,并且module的值为aaaa,如果要想获取module的值,只需执行
gulp.env.module即可,但是使用evn时会报警告gulp.env has been deprecated
切换开发,测试,生产环境的地址信息,仁者见仁
https://segmentfault.com/a/1190000004138375?_ea=503865
标签尽量不用<!-- /build -->,正常build 正常<!-- endbuild -->
例子:
<!-- build:js vendor.js -->
<!-- build:js dist-rjs/js/vendor.js -->
<script type="text/javascript" src="../js/index.js"></script>
<!-- /build -->
<!-- endbuild -->
次处,有可省略项。
插件css
虽然没有路径直接指出要对次处的css进行压缩,但是在以下出现,
也可以说明:
原因是这个执行的html里面build了你找的css资源,主要是gulp-useref等等。
当对一个壳子html处理,gulp.src(壳子html),它.pipe(useref())或者.pipe(processhtml())
.pipe(inject(sources))
.pipe(useref())
的时候,能够通过html上的<!-- build:css css.css inline --> <!-- endbuild -->等等拿到cssjs等文件的流,所以在判断if的时候,js文件css文件是存在的是true,所以执行压缩。
当html<!-- build:css css.css -->
<link rel="stylesheet" type="text/css" href="../css/index-1.css">
<link rel="stylesheet" type="text/css" href="../css/index-2.css">
<link rel="stylesheet" type="text/css" href="../fonts/iconfont/iconfont.css">
<!-- endbuild -->执行.pipe(useref())这句话过的时候,就已经替换成了
<link rel="stylesheet" type="text/css" href="css.css">
不仅是html页面替换了,而且会生成一个css.css文件到指定的输出目录下面。
所以css存在。
同理,js替换了,而且生成一个目录/子目录/vendor.js的文件到输出目录。
<!--浏览器版本过低提示-->
<!--[if lt IE 10]> <div class="browser-tip"><div class="browser-tip-content">
<i class="icon iconfont"></i>由于您的浏览器版本过低,可能无法在本网站获得最佳体验。建议您将浏览器升级至<a class="browser-link" href="https://www.microsoft.com/zh-cn/download/internet-explorer.aspx" target="_blank">IE10</a>以上版本,或使用<a class="browser-link" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank">Chrome</a>、<a class="browser-link" href="http://www.firefox.com.cn" target="_blank">Firefox</a>的最新版本。<i class="icon iconfont browser-tip-close"></i></div></div> <![endif]-->
一句提示,仅仅当ie浏览器版本小于10的时候出现。
图片不要直接写路径到src html页面中,不然打包的时候麻烦。
虽然没这个说法,但是做的时候要考虑。
比如中登的banner图页,https://inv.chinaclear.cn/ 的三个li图,就是直接写在li的class里面,以背景图的方式出现。
但是jd的banner图是写在img src里面。
标签:tip 打包 oba comment 执行 zip tor dir chrome
原文地址:http://www.cnblogs.com/wulinzi/p/7967250.html