0. 问题描述
使用网上的blur-admin模板, 本来想着很轻易的弄弄.
本着想学习前端angular的native的想法, 结果硬是把gulp流程学习了一番.
1. blur-admin项目结构
----
|-- bower_components // 供应模块集合
|-- gulp // gulp任务文件目录
|-- node_modules // node模块
|-- src // 源文件
|-- bower.json // 项目供应模块列表
|-- gulpfile.js // gulp任务文件
|-- package.json
另外, src目录结构
|-- app // 应用文件(app/app.js入口文件; app/pages页面集合; app/theme模板主题)
|-- assets // 图片字体等资源目录
|-- sass // sass文件(预编译后能生成css)
|-- 404.html // 404-Not-Found
|-- index.html // 导航页面
|-- reg.html // 注册页面
|-- auth.html // 登录(鉴权)页面
2. gulp流程
- 项目目录/gulpfile.js:
...
// 加载[项目目录/gulp]目录下的所有js文件
// 注意, 这里是把所有自定义的task任务加载进来了的!!!
wrench.readdirSyncRecursive('./gulp').filter(function(file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
require('./gulp/' + file);
});
// 默认build方式: clean -> build
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
- gulp目录
|-- build.js // build任务
|-- conf.js // 配置文件
|-- image.js // 复制模板图片任务
|-- inject.js // 注入任务
|-- script.js // 优化脚本任务
|-- server.js // 顺便架设在服务器上
|-- style.js // 样式任务
- 代码阅读
说明: 先执行optional_task1(, ...); 然后执行task_name; 最后执行function(){}函数
gulp.task('task_name', ['optional_task1', 'optional_task2', ..., ], function() {
// ...
})
以下面这个命令为例:
[root@localhost blur-admin]# gulp
不带任何参数, 表示执行默认任务. 在[gulpfile.js]里的最后, 有下面代码
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
根据上面的说明: 执行顺序: clean任务 => default任务 => build任务
进入gulp clean任务, 在gulp/build.js文件里
// 说明: 简单的删掉两个目录; 删掉输出目录和.tmp目录
gulp.task('clean', function () {
return $.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp, '/')]);
});
然后到build任务里, [gulp/build.js]文件最后, 有下面代码
gulp.task('build', ['html', 'fonts', 'other']);
// 同理, 执行顺序: html任务 => fonts任务 => other任务 => build任务
同理跟进到html任务, 在[gulp/build.js]文件:
gulp.task('html', ['inject', 'partials'], function () {
...
});
继续跟进inject任务, 在[gulp/inject.js]文件.blabla
根据这样的方式, 我们找到了scripts任务:
说明: pipe在gulp里是顺序往下一步步走
在'app/**/*.js'里:
**表示0到多重任意目录, 即app下所有目录; *.js表示任意后缀问'.js'的文件, 即js文件
gulp.task('scripts', function() {
return buildScripts();
});
function buildScripts() {
return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.size())
};
根据这样的方式, 我们找到了style任务:
gulp.task('styles', function () {
return buildStyles();
});
...
var buildStyles = function () {
...
var injectFiles = gulp.src([
// sass目录下的所有.scss文件
path.join(conf.paths.src, '/sass/**/_*.scss'),
// '!'表示排除某个文件, 这里排除了sass/theme/conf目录下的所有文件等
'!' + path.join(conf.paths.src, '/sass/theme/conf/**/*.scss'),
...
], {read: false});
var injectOptions = {
transform: function (filePath) {
// 截断前面的目录, 之后就用相对路径了
filePath = filePath.replace(conf.paths.src + '/sass/', '');
return '@import "' + filePath + '";';
},
...
};
return gulp.src([
path.join(conf.paths.src, '/sass/main.scss') // 输入文件
])
...
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/'))); // 输出到目录
};
配置文件: gulp/conf.js
...
exports.paths = {
src: 'src', // src目录配置
dist: 'release', // 最后输出模板到那个位置
devDist: 'dev-release',
tmp: '.tmp',
e2e: 'e2e',
};
...
如果要启用浏览器调试:
使用gulp serve或是gulp serve:dist.
区别是前者使用的原来的src, 后者使用编译后的
'use strict';
...
gulp.task('serve', ['watch'], function () {
browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});
gulp.task('serve:dist', ['build'], function () {
browserSyncInit(conf.paths.dist);
});
3. 依葫芦画瓢
还是动手练练.给reg.html写一个注入的auth.js文件
首先, 在reg.html追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
...
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon-96x96.png">
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/auth.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body>
<main class="auth-main">
...
</main>
!!!这里是追加的:
<!-- build:js({.tmp/serve,src}) scripts/auth.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
上面的3处注释可不是简单的注释文件, 而是要注入css/js的
然后, 自定义脚本任务
// 创建自定义的scriptsAuth任务
gulp.task('scriptsAuth', function () {
return buildIntoSingleScript(
[path.join(conf.paths.jquery, '/jquery.min.js'), path.join(conf.paths.appMyConf, '/config.js')], 'auth.js');
});
var buildIntoSingleScript = function (paths, targetName) {
return gulp.src(paths)
.pipe(gulpConcat(targetName))
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.size())
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
};
把scriptsAuth任务添加到任务树中
// 把它加在注入auth文件前边, 由于用到了jquery, 也把jquery加进去
gulp.task('injectAuth', ['scripts', 'styles', 'stylesAuth', 'scriptsAuth'], function () {
return injectAlone({
js: [path.join(conf.paths.tmp, '/serve/app/auth.js')],
css: [path.join('!' + conf.paths.tmp, '/serve/app/vendor.css'), path.join(conf.paths.tmp, '/serve/app/auth.css')],
paths: [path.join(conf.paths.src, '/auth.html'), path.join(conf.paths.src, '/reg.html')]
})
});
最后, 在realease/scripts可以看到注入的文件啦
浏览器也能登陆看到~
4. 小结
总的来说, 动手尝试一些东西会学到更多.
简单梳理了gulp流程, 有了清晰概念
另外, 该框架加载了很多UI插件, 有些却不会用到. 可删减部分定制
