合并Magix View的html,js,css文件成一个js文件,需要配合其它工具使用。
- 合并html,css,js成一个js文件。为什么不在打包上线时合并?
- css只在当前区块内生效。关于style的scope css模块
- 基于mx-keys的子模板离线数据提取及预处理
- 类node模块的写法,由工具加上web loader
{
"name": "magix-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"magix-combine": "",
"gulp": "",
"gulp-watch": "",
"gulp-uglify": "",
"gulp-cssnano": "",
"del": ""
}
}
var tmplFolder = 'tmpl'; //template folder
var srcFolder = 'src'; //source folder
var buildFolder = 'build'; //build folder
var excludeTmplFolders = [//忽略哪些文件夹或文件的处理
'tmpl/boot.js'
];
var onlyAllows = {//只处理哪些文件
'.html': 1,
'.css': 1,
'.json': 1,
'.sass': 1,
'.less': 1
};
var gulp = require('gulp');
var watch = require('gulp-watch');
var fs = require('fs');
var combineTool = require('magix-combine');
var del = require('del');
combineTool.config({
tmplFolder: tmplFolder,
srcFolder: srcFolder,
buildFolder: buildFolder,
excludeTmplFolders: excludeTmplFolders,
onlyAllows: onlyAllows,
loaderType:'cmd' //or amd
});
gulp.task('cleanSrc', function() {
return del(srcFolder);
});
gulp.task('combine', ['cleanSrc'], function() {
combineTool.combine();
});
gulp.task('watch', ['combine'], function() {
watch(tmplFolder + '/**/*', function(e) {
console.log(e.path);
if (fs.existsSync(e.path)) {
combineTool.processFile(e.path);
} else {
combineTool.removeFile(e.path);
}
});
});
var uglify = require('gulp-uglify');
var cssnano = require('gulp-cssnano');
gulp.task('cleanBuild', function() {
return del(buildFolder);
});
gulp.task('build', ['cleanBuild'], function() {
combineTool.build();
gulp.src(buildFolder + '/**/*.js')
.pipe(uglify({
compress: {
drop_console: true
}
}))
.pipe(gulp.dest(buildFolder));
gulp.src(buildFolder + '/**/*.css')
.pipe(cssnano())
.pipe(gulp.dest(buildFolder));
});
把filename.html文件的内容输出在当前位置
把filename.html文件的子模板对象内容输出在当前位置,需要配合mx-updater
把filename.html文件的mx-keys所有keys输出在当前位置
把filename.html文件的mx-event事件对象以数组对象输出在当前位置
把filename.[css,less,scss]文件的内容输出在当前位置,同时修改css的类名,确保在当前项目唯一,请配合Magix.applyStyle方法使用
把filename.[css,less,scss]文件中的类名映射到新类名的对象,因为编译工具会修改类名,所以通过该对象访问修改后的类名
把filename.[css,less,scss]文件中的类名映射到新类名的对象,该对象仅包含指定的s1,s2和s3,比names@filename.[css,less,scss]更节省资源,但书写略不方便
把filename.[css,less,scss]文件的内容输出在当前位置,但不会对css的类名做任何变动
引用filename.[css,less,scss]文件的内容,但不输出在当前位置,仅使用编译后的类名替换掉模板中的类名,如果你需要访问编译后的类名,请参考names@filename.[css,less,scss]。
把filename.[css,less,scss]中经工具编译转换后的className字符串输出在当前位置
[DELETE] 从1.1.0版本开始删除,与compressCssNames冲突故删除 获取工具编译filename.css时自动添加的前缀,并输出在当前位置
当前文件的模块id,如app/views/default
相对路径转完整的模块路径,或完整的模块路径转相对路径
string 包含html,css,js的模板目录,默认tmpl
string 把html,css,js合并后的目录,默认src
string 上线压缩的目录,默认build
object css压缩选项,更多信息请参考https://www.npmjs.com/package/cssnano
object html压缩选项,更多信息请参考https://www.npmjs.com/package/html-minifier
object https://www.npmjs.com/package/node-sass
array 在处理tmplFolder目录时,跳过某些目录或文件的处理
object 代码片断对象,在处理复杂html时有用
boolean 是否压缩css名称,默认false
[DELETE] 从1.1.0版本开始删除,由loaderType代替 boolean 是否移除require代码
[DELETE] 从1.1.0版本开始删除,由loaderType和内置的file:loader处理器代替 function 如何把html,js和css生成最终的js文件,需要开发者实现该方法
function 添加或重写内容处理器的实现
function
function 如何压缩模板引擎的命令
function 如何处理附属js的html和css文件,像css文件在某些情况下无法打包进js,需要发布到上线文件夹里
function 处理js文件内容
function 遍历某个文件夹
function 复制文件
function 删除文件,同时移除相应的缓存内容
function 配置
function 把tmplFolder中的文件编译合并到srcFolder目录中
function 处理单个文件
function 同步srcFolder目录下的文件到buildFolder目录下