gulpfile-build.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  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. srcCss: 'dest/css',
  44. srcImg: 'dest/img/slice',
  45. destCss: 'dest/css',
  46. destImg: 'dest/img/sprite',
  47. 'algorithm': 'binary-tree',
  48. 'padding': 4,
  49. 'exportOpts': {
  50. 'format': 'png',
  51. 'quality': 90
  52. },
  53. successCB: function(){
  54. del(['dest/img/slice/**'])
  55. // 给css文件的图片请求加上时间戳
  56. var timestamp = +new Date
  57. gulp.src(['dest/css/**'])
  58. .pipe(plugins.replace(/(\/[\w-]*\.(jpg|jpeg|gif|png|bmp|tiff|otf|ttf|woff|svg|webp|swf|htc))/ig, '$1?'+timestamp))
  59. .pipe(gulp.dest('dest/css'));
  60. }
  61. })
  62. })
  63. gulp.task('build_js', function() {
  64. return gulp.src('src/js/**/*.js')
  65. .pipe(plugins.uglify({mangle:false}))
  66. .pipe(plugins.header(banner, { pkg : pkg } ))
  67. .pipe(gulp.dest('dest/js'))
  68. })
  69. gulp.task('build_img', function() {
  70. return gulp.src(['src/img/**', '!src/img/**/*.psd', '!src/img/slice/**'])
  71. .pipe(plugins.imagemin({
  72. progressive: true
  73. }))
  74. .pipe(gulp.dest('dest/img'))
  75. })
  76. gulp.task('build_svgslice', function() {
  77. function renameSvg(p){
  78. p.basename = 'symbols'
  79. }
  80. return gulp.src('src/svg/slice/*.svg')
  81. .pipe(plugins.svgSymbols({templates: ['default-svg']}))
  82. .pipe(plugins.rename(renameSvg))
  83. .pipe(gulp.dest('src/svg'))
  84. })
  85. gulp.task('build_svg', ['build_svgslice'], function() {
  86. return gulp.src(['src/svg/**', '!src/svg/slice/**', '!src/svg/slice/'])
  87. .pipe(gulp.dest('dest/svg'))
  88. })
  89. gulp.task('build_fonts', function() {
  90. return gulp.src('src/fonts/**')
  91. .pipe(gulp.dest('dest/fonts'))
  92. })
  93. gulp.task('build_html', ['build_ejs'], function() {
  94. return gulp.src(['src/*.html'])
  95. .pipe(gulp.dest('dest'))
  96. })
  97. gulp.task('build_ejs', function() {
  98. return gulp.src('src/tpl/*.ejs')
  99. .pipe(plugins.ejs().on('error', console.log))
  100. .pipe(gulp.dest('src/'))
  101. })
  102. gulp.task('build_clean', function() {
  103. del.sync(['dest/**'])
  104. })
  105. gulp.task('build', ['build_clean', 'build_html', 'build_sprite', 'build_js', 'build_img', 'build_fonts'], function(){
  106. browserSync({
  107. ui:false,
  108. server: {
  109. baseDir: "dest",
  110. directory: true
  111. },
  112. notify: false,
  113. ghostMode:false,
  114. codeSync: false,
  115. port: that.port,
  116. open: "external",
  117. browser: "/Applications/Google\ Chrome.app/"
  118. },function(err, arg){
  119. if (argv.q) {
  120. var url = arg.options.get('urls').get('external')
  121. var qrcode = require('qrcode-terminal')
  122. qrcode.generate(url);
  123. }
  124. })
  125. })
  126. gulp.task('dest', function(){
  127. browserSync({
  128. ui:false,
  129. server: {
  130. baseDir: "dest",
  131. directory: true
  132. },
  133. notify: false,
  134. ghostMode:false,
  135. codeSync: false,
  136. port: that.port,
  137. open: "external",
  138. browser: "/Applications/Google\ Chrome.app/"
  139. },function(err, arg){
  140. if (argv.q) {
  141. var url = arg.options.get('urls').get('external')
  142. var qrcode = require('qrcode-terminal')
  143. qrcode.generate(url);
  144. }
  145. })
  146. })
  147. }