1 | ;
|
2 | /**
|
3 | * css文件处理
|
4 | * - opacity透明兼容
|
5 | * - 前缀处理
|
6 | * - 文件签名
|
7 | *
|
8 | * @class Compile
|
9 | * {
|
10 | * src:'', <string> 源文件路径
|
11 | * dist:'', <string> 输出路径
|
12 | * }
|
13 | */
|
14 | class Compile{
|
15 | constructor(option){
|
16 | const _ts = this;
|
17 |
|
18 | option = option || {};
|
19 |
|
20 | let m = _ts.m = {
|
21 | fs:require('fs-extra'),
|
22 | path:require('path'),
|
23 | pathInfo:require('../lib/getPathInfo'),
|
24 | signature:require('../lib/signature'),
|
25 | postcss:require('postcss'),
|
26 | opacity:require('postcss-opacity'),
|
27 | CleanCSS:require('clean-css'),
|
28 | autoprefixer:require('autoprefixer'),
|
29 | filterGradient:require('postcss-filter-gradient')
|
30 | },
|
31 | config = _ts.config = {};
|
32 |
|
33 | //配置写入到_ts.config
|
34 | for(let i in option){
|
35 | config[i] = option[i];
|
36 | };
|
37 | // let src = config.src,
|
38 | // dist = config.dist,
|
39 | // isMobile = config.isMobile;
|
40 |
|
41 | return _ts.taskList();
|
42 | }
|
43 |
|
44 | taskList(){
|
45 | const _ts = this,
|
46 | m = _ts.m,
|
47 | config = _ts.config;
|
48 |
|
49 | return new Promise((resolve,reject)=>{
|
50 | let css, //css内容
|
51 | cleaner,
|
52 | signature; //签名
|
53 |
|
54 | //设置postcss相关插件及选项,移动端下无需处理透明兼容,前缀添加使用默认选项
|
55 | if(config.isMobile){
|
56 | cleaner = m.postcss([
|
57 | m.autoprefixer({
|
58 | add:true
|
59 | })
|
60 | ]);
|
61 | }else{
|
62 | cleaner = m.postcss([
|
63 | m.opacity({
|
64 | legacy:true
|
65 | }),
|
66 | m.filterGradient(),
|
67 | m.autoprefixer({
|
68 | add:true,
|
69 | browsers: ['Last 40 versions']
|
70 | //browsers: ['ie >= 6', 'Chrome >= 40', 'Last 40 versions']
|
71 | })
|
72 | ]);
|
73 | };
|
74 |
|
75 | //读取文件内容
|
76 | if(m.pathInfo(config.src).extension === '.css' || m.pathInfo(config.src).extension === '.wxss'){
|
77 | css = m.fs.readFileSync(config.src).toString();
|
78 | }else{
|
79 | reject({
|
80 | status:'error',
|
81 | msg:`${config.src} 不是有效的 CSS 文件`
|
82 | });
|
83 | };
|
84 |
|
85 | cleaner.process(css,{from:config.src,to:config.dist}).then(function (cleaned) {
|
86 | return new m.CleanCSS({
|
87 | compatibility:'ie7',
|
88 | format:config.isBeautify ? 'keep-breaks' : false
|
89 | }).minify(cleaned.css);
|
90 | }).then(function (result) {
|
91 | //设置文件签名
|
92 | signature = m.signature('.css');
|
93 |
|
94 | //css内容为签名+处理过的css内容
|
95 | let cssContent = '@charset "UTF-8";\r\n'+signature+result.styles.replace(/@charset "UTF-8";/g,'');
|
96 |
|
97 | //写入文件之前先创建好对应的目录
|
98 | let distDir = m.path.dirname(config.dist);
|
99 | m.fs.ensureDir(distDir,err => {
|
100 | if(err){
|
101 | reject({
|
102 | status:'error',
|
103 | msg:`${distDir} 创建失败`,
|
104 | info:err
|
105 | });
|
106 | };
|
107 |
|
108 | //写入文件
|
109 | try{
|
110 | m.fs.writeFileSync(config.dist,cssContent);
|
111 | resolve({
|
112 | status:'success',
|
113 | msg:`写入 ${config.dist}`,
|
114 | data:cssContent
|
115 | });
|
116 | }catch(err){
|
117 | reject({
|
118 | status:'error',
|
119 | msg:`${config.dist} 创建失败`,
|
120 | info:err
|
121 | });
|
122 | };
|
123 | })
|
124 | });
|
125 | });
|
126 | }
|
127 | }
|
128 | module.exports = Compile;
|