gulpfile.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. "use strict";
  2. const { src, dest, watch } = require("gulp");
  3. const postcss = require("gulp-postcss");
  4. const browserSync = require("browser-sync").create();
  5. const sass = require("gulp-sass");
  6. const babel = require('gulp-babel');
  7. var sourcemaps = require("gulp-sourcemaps"); //生成map文件
  8. //html
  9. const layout1 = require('layout1') //layout布局
  10. const frontMatter = require('./cr-front-matter.js'); //html模板处理
  11. let fileinclude = require('gulp-file-include'); //html 文件引用 if for。。。
  12. const htmlbeautify = require('gulp-html-beautify'); //美化html
  13. //postcss插件
  14. const clearfix = require('postcss-clearfix'); //clear: fix;
  15. const autoprefixer = require('autoprefixer'); //兼容
  16. const colorFunction = require("postcss-color-function") //color 函数
  17. const del = require('del');
  18. const color = require('colors-cli')
  19. // 定义路径
  20. const path = {
  21. html: ["src/pages/**/*.html","src/passport/**/*.html"],
  22. outHtml: "html",
  23. scss: "src/scss/*.scss",
  24. css: "assets/css",
  25. js: "assets/js/*.js"
  26. };
  27. //监听scss
  28. function watchScss() {
  29. const processors = [
  30. clearfix,
  31. colorFunction,
  32. autoprefixer
  33. ];
  34. return src(path.scss)
  35. .pipe(sourcemaps.init())
  36. //outputStyle: expanded:扩大 compressed:压缩
  37. .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
  38. .pipe(postcss(processors))
  39. .pipe(sourcemaps.write("./maps"))
  40. .pipe(dest(path.css))
  41. .pipe(browserSync.stream());
  42. }
  43. //监听html
  44. function watchHtml() {
  45. return src(path.html)
  46. .pipe(frontMatter({
  47. property: 'fm'
  48. }))
  49. .pipe(layout1.ejs('src/layout/layout.ejs'))
  50. .pipe(fileinclude({
  51. prefix: '@@',
  52. basepath: 'src/components/'
  53. }))
  54. .pipe(htmlbeautify())
  55. .pipe(dest(path.outHtml))
  56. .pipe(browserSync.stream());
  57. }
  58. //监听js
  59. function watchJs() {
  60. return src(path.js)
  61. // .pipe(sourcemaps.init())
  62. // .pipe(babel({
  63. // presets: ['@babel/preset-env']
  64. // }))
  65. // .pipe(sourcemaps.write("./maps"))
  66. // .pipe(dest('dist/js'))
  67. .pipe(browserSync.stream());
  68. }
  69. //整合
  70. function service() {
  71. browserSync.init({
  72. server: "./"
  73. });
  74. watch([...path.html,'src/**/*.html','/src/layout/layout.ejs'], watchHtml);
  75. watch([path.scss,'src/scss/**/*.scss'], watchScss);
  76. watch(path.js, watchJs);
  77. // 监听layout
  78. }
  79. // 移动到wwwroot
  80. let log = (str)=>console.log(color.green(str));
  81. function file_move() {
  82. //删除原始文件
  83. log('删除原始文件...');
  84. del('../CZKJ.CMS.Web/wwwroot/assets/**', { force: true });
  85. log('开始移动文件...');
  86. //移动
  87. return src('./assets/**')
  88. .pipe(dest('../CZKJ.CMS.Web/wwwroot/assets'))
  89. .on('end', () => {
  90. // del('./dist');
  91. log('移动完成...');
  92. })
  93. }
  94. exports.service = service;
  95. exports.move = file_move;
  96. exports.default = service;