查看: 2383|回复: 0

[JavaScript/JQuery] POST-CSS...................

发表于 2018-2-14 08:00:02
  1. // 引入 gulp
  2. var gulp = require('gulp');
  3. // 引入组件
  4. var Autoprefixer = require('gulp-autoprefixer');//自动添加浏览器前缀
  5. var htmlmin = require('gulp-htmlmin');//压缩html,可以压缩页面js、css
  6. var imagemin = require('gulp-imagemin');//压缩图片文件(包括PNG、JPEG、GIF和SVG图片)
  7. var minifycss = require('gulp-minify-css');//压缩css文件,并给引用url添加版本号避免缓存
  8. var revappend = require('gulp-rev-append');//给页面的引用添加版本号,清除页面引用缓存
  9. var spritesmith = require('gulp.spritesmith');//生成sprites图片和样式表
  10. var less = require('gulp-less');//编译Less
  11. var csslint = require('gulp-csslint');//检查css有无报错或警告
  12. var jshint = require('gulp-jshint');//检查js有无报错或警告
  13. var concat = require('gulp-concat');//合并js文件
  14. var uglify = require('gulp-uglify');//压缩js文件
  15. var babel = require('gulp-babel');//转换代码为ES6最新语法形式
  16. //引入PostCss
  17. var postcss = require('gulp-postcss');
  18. var bem = require('postcss-bem');
  19. var cssNext = require('postcss-cssnext');
  20. var px2rem = require('postcss-px2rem');//px转换成rem
  21. var autoprefixer = require('autoprefixer-core');
  22. var postcssSimpleVars = require("postcss-simple-vars");
  23. var postcssMixins = require("postcss-mixins");
  24. var postcssNested = require("postcss-nested");
  25. var sourcemaps = require("gulp-sourcemaps");
  26. //nodeJS中管道式方法的api一般为.pipe()方法,管道化执行组件任务,它很类似jQuery中的链式写法
  27. //定义一个Less任务(自定义任务名称)
  28. // 编译Less
  29. gulp.task('less', function() {
  30. gulp.src('./less/*.less') //该任务针对的文件,*代表所有文件
  31. .pipe(less()) //该任务调用的模块
  32. .pipe(gulp.dest('./css')); //将会在css目录下生成.css文件
  33. });
  34. //postcss处理css.
  35. gulp.task("postcss", function(){
  36. var processors = [
  37. postcssMixins,
  38. postcssSimpleVars,
  39. postcssNested,
  40. cssNext,
  41. bem({style: 'bem'}),
  42. px2rem({
  43. remUnit: 75
  44. }),
  45. autoprefixer({
  46. browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
  47. })];
  48. return gulp.src(['./css/*.css'])
  49. .pipe(sourcemaps.init())
  50. .pipe(postcss(processors))
  51. .pipe(sourcemaps.write("."))
  52. .pipe(gulp.dest("./stylesheets"));
  53. });
  54. //生成sprites图片和样式表
  55. gulp.task('sprite', function () {
  56. var spriteData = gulp.src('./images/*.png').pipe(spritesmith({
  57. imgName: 'sprite.png',
  58. cssName: 'sprite.css'
  59. }));
  60. return spriteData.pipe(gulp.dest('./sprite'));
  61. });
  62. //根据设置浏览器版本自动处理浏览器前缀
  63. gulp.task('testAutoFx', function () {
  64. gulp.src('./css/*.css')
  65. .pipe(Autoprefixer({
  66. browsers: ['last 2 versions'], //主流浏览器的最新两个版本
  67. cascade: true, //是否美化属性值 默认:true 像这样:
  68. //-webkit-transform: rotate(45deg);
  69. // transform: rotate(45deg);
  70. remove:true //是否去掉不必要的前缀 默认:true
  71. }))
  72. .pipe(gulp.dest('./dist/css'));
  73. });
  74. //将px转换成rem
  75. gulp.task('px2rem', function() {
  76. var processors = [
  77. px2rem({
  78. remUnit: 75
  79. })
  80. ];
  81. return gulp.src('./css/*.css')
  82. .pipe(postcss(processors))
  83. .pipe(gulp.dest('./dest'));
  84. });
  85. //转换代码为ES6最新语法形式
  86. gulp.task('babel', function() {
  87. return gulp.src('./js/*.js')
  88. .pipe(babel())
  89. .pipe(gulp.dest('dist/es6'));
  90. });
  91. //压缩HTML
  92. gulp.task('testHtmlmin', function () {
  93. var options = {
  94. removeComments: true,//清除HTML注释
  95. collapseWhitespace: true,//压缩HTML
  96. collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
  97. removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
  98. removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
  99. removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
  100. minifyJS: true,//压缩页面JS
  101. minifyCSS: true//压缩页面CSS
  102. };
  103. gulp.src('*.html')
  104. .pipe(htmlmin(options))
  105. .pipe(gulp.dest('./dist/html'));
  106. });
  107. //压缩图片
  108. gulp.task('testImagemin', function () {
  109. gulp.src('./images/*.{png,jpg,gif,ico}')
  110. .pipe(imagemin({
  111. optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
  112. progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
  113. interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
  114. multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
  115. }))
  116. .pipe(gulp.dest('./dist/images'));
  117. });
  118. //压缩css
  119. gulp.task('testCssmin', function () {
  120. gulp.src('./css/*.css')
  121. .pipe(minifycss())
  122. .pipe(gulp.dest('./dist/css'));
  123. });
  124. // 检查css
  125. gulp.task('csslint', function() {
  126. gulp.src('./css/*.css')
  127. .pipe(csslint())
  128. .pipe(csslint.reporter());
  129. });
  130. // 检查js
  131. gulp.task('jslint', function() {
  132. gulp.src('./js/*.js')
  133. .pipe(jshint())
  134. .pipe(jshint.reporter('default'));
  135. });
  136. // 合并、压缩js文件
  137. gulp.task('scripts', function() {
  138. gulp.src('./js/*.js')
  139. .pipe(concat('all.js'))
  140. .pipe(gulp.dest('./dist'))
  141. .pipe(rename('all.min.js'))
  142. .pipe(uglify())
  143. .pipe(gulp.dest('./dist/js'));
  144. });
  145. //每个gulpfile.js里都应当有一个dafault任务,它是缺省任务入口
  146. // 定义默认任务
  147. gulp.task('default', function(){
  148. gulp.run('postcss', 'csslint', 'testImagemin', 'jslint', 'testCssmin', 'scripts');// 表示运行对应的任务
  149. // 监听文件变化,若有改动则执行以下三个任务
  150. gulp.watch('./js/*.js', function(){
  151. gulp.run('postcss', 'csslint', 'jslint', 'testCssmin', 'scripts');
  152. });
  153. });
复制代码


回复

使用道具 举报