gulpfile-build.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. module.exports = function(gulp, plugins) {
  2. var argv = require('yargs').argv,
  3. del = require('del'),
  4. moment = require('moment'),
  5. multiSprite = require('multi-sprite'),
  6. browserSync = require('browser-sync'),
  7. log = console.log;
  8. var that = this;
  9. that.port = +argv.p || 3000;
  10. var pkg = require('../package.json');
  11. var banner = '/*!' + '\n * @project : ' + pkg.name + '\n * @version : ' + pkg.version + '\n * @author : ' + pkg.author + '\n * @update : ' + moment().format('YYYY-MM-DD h:mm:ss a') + '\n */\r';
  12. gulp.task('build_sass', function() {
  13. function sassCompile4nix(){
  14. function handler(){
  15. return plugins.notify.onError({
  16. title:'sass编译错误',
  17. message:'<%=error.message%>'
  18. })
  19. }
  20. return plugins.sass().on('error', handler())
  21. }
  22. return gulp.src('src/sass/*.scss')
  23. .pipe(plugins.sourcemaps.init())
  24. .pipe(sassCompile4nix())
  25. .pipe(plugins.sourcemaps.write({includeContent: false, sourceRoot: '../sass/'}))
  26. .pipe(plugins.sourcemaps.init({loadMaps: true}))
  27. .pipe(plugins.autoprefixer( {browsers: ['> 0%']} ))
  28. .pipe(plugins.sourcemaps.write({includeContent: false, sourceRoot: '../sass/'}))
  29. .pipe(gulp.dest('src/css'))
  30. })
  31. gulp.task('build_css', ['build_sass'], function() {
  32. return gulp.src('src/css/**/*.css')
  33. .pipe(plugins.minifyCss({"compatibility":"ie7"}))
  34. .pipe(plugins.header(banner, { pkg : pkg } ))
  35. .pipe(gulp.dest('dest/css'))
  36. })
  37. gulp.task('build_slice', function() {
  38. return gulp.src('src/img/slice/**')
  39. .pipe(gulp.dest('dest/img/slice'))
  40. })
  41. gulp.task('build_sprite', ['build_slice', 'build_css'], function() {
  42. return multiSprite({
  43. rootFontSize: argv.w? +argv.w/16 : 750/16,
  44. srcCss: 'dest/css',
  45. srcImg: 'dest/img/slice',
  46. destCss: 'dest/css',
  47. destImg: 'dest/img/sprite',
  48. 'algorithm': 'binary-tree',
  49. 'padding': 4,
  50. 'exportOpts': {
  51. 'format': 'png',
  52. 'quality': 90
  53. },
  54. successCB: function(){
  55. del(['dest/img/slice/**'])
  56. // 给css文件的图片请求加上时间戳
  57. var timestamp = +new Date
  58. gulp.src(['dest/css/**'])
  59. .pipe(plugins.replace(/(\/[\w-]*\.(jpg|jpeg|gif|png|bmp|tiff|otf|ttf|woff|svg|webp|swf|htc))/ig, '$1?'+timestamp))
  60. .pipe(gulp.dest('dest/css'));
  61. }
  62. })
  63. })
  64. gulp.task('build_js', function() {
  65. return gulp.src('src/js/**/*.js')
  66. .pipe(plugins.uglify({mangle:false}).on('error', console.log))
  67. .pipe(plugins.header(banner, { pkg : pkg } ))
  68. .pipe(gulp.dest('dest/js'))
  69. })
  70. gulp.task('build_img', function() {
  71. return gulp.src(['src/img/**', '!src/img/**/*.psd', '!src/img/slice/**', '!src/img/slice/'])
  72. .pipe(plugins.imagemin({
  73. progressive: true
  74. }))
  75. .pipe(gulp.dest('dest/img'))
  76. })
  77. gulp.task('build_svgslice', function() {
  78. function renameSvg(p){
  79. p.basename = 'symbols'
  80. }
  81. return gulp.src('src/svg/slice/*.svg')
  82. .pipe(plugins.svgSymbols({templates: ['default-svg']}))
  83. .pipe(plugins.rename(renameSvg))
  84. .pipe(gulp.dest('src/svg'))
  85. })
  86. gulp.task('build_svg', ['build_svgslice'], function() {
  87. return gulp.src(['src/svg/**', '!src/svg/slice/**', '!src/svg/slice/'])
  88. .pipe(gulp.dest('dest/svg'))
  89. })
  90. gulp.task('build_fonts', function() {
  91. return gulp.src('src/fonts/**')
  92. .pipe(gulp.dest('dest/fonts'))
  93. })
  94. gulp.task('build_html', ['build_ejs'], function() {
  95. return gulp.src(['src/*.html'])
  96. .pipe(gulp.dest('dest'))
  97. })
  98. gulp.task('build_ejs', function() {
  99. return gulp.src('src/tpl/*.ejs')
  100. .pipe(plugins.ejs().on('error', console.log))
  101. .pipe(gulp.dest('src/'))
  102. })
  103. gulp.task('build_clean', function() {
  104. del.sync(['dest/**'])
  105. })
  106. gulp.task('build', ['build_clean', 'build_html', 'build_sprite', 'build_js', 'build_img', 'build_fonts'], function(){
  107. browserSync({
  108. ui:false,
  109. server: {
  110. baseDir: "dest",
  111. directory: true
  112. },
  113. notify: false,
  114. ghostMode:false,
  115. codeSync: false,
  116. port: that.port,
  117. open: "external",
  118. browser: "/Applications/Google\ Chrome.app/"
  119. },function(err, arg){
  120. if (argv.q) {
  121. var url = arg.options.get('urls').get('external')
  122. var qrcode = require('qrcode-terminal')
  123. qrcode.generate(url);
  124. }
  125. })
  126. })
  127. gulp.task('dest', function(){
  128. browserSync({
  129. ui:false,
  130. server: {
  131. baseDir: "dest",
  132. directory: true
  133. },
  134. notify: false,
  135. ghostMode:false,
  136. codeSync: false,
  137. port: that.port,
  138. open: "external",
  139. browser: "/Applications/Google\ Chrome.app/"
  140. },function(err, arg){
  141. if (argv.q) {
  142. var url = arg.options.get('urls').get('external')
  143. var qrcode = require('qrcode-terminal')
  144. qrcode.generate(url);
  145. }
  146. })
  147. })
  148. }