gulpfile-build.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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. var config = {
  14. sourceComments: 'map',
  15. sourceMap: 'sass',
  16. style: 'compact',
  17. onError: function(err){ log(chalk.bold.red('【sass compile error】>>> \n' + JSON.stringify(err) )) }
  18. }
  19. return gulp.src('src/sass/*.scss')
  20. .pipe(plugins.sass(config))
  21. .pipe(plugins.autoprefixer( {browser: ['> 0%']} ))
  22. .pipe(gulp.dest('src/css'))
  23. })
  24. gulp.task('build_css', ['build_sass'], function() {
  25. return gulp.src('src/css/**/*.css')
  26. .pipe(plugins.minifyCss({"compatibility":"ie7"}))
  27. .pipe(plugins.header(banner, { pkg : pkg } ))
  28. .pipe(gulp.dest('dest/css'))
  29. })
  30. gulp.task('build_slice', function() {
  31. return gulp.src('src/img/slice/**')
  32. .pipe(gulp.dest('dest/img/slice'))
  33. })
  34. gulp.task('build_sprite', ['build_slice', 'build_css'], function() {
  35. return multiSprite({
  36. srcCss: 'dest/css',
  37. srcImg: 'dest/img/slice',
  38. destCss: 'dest/css',
  39. destImg: 'dest/img/sprite',
  40. 'algorithm': 'binary-tree',
  41. 'padding': 4,
  42. 'exportOpts': {
  43. 'format': 'png',
  44. 'quality': 90
  45. },
  46. successCB: function(){
  47. del(['dest/img/slice/**'])
  48. // 给css文件的图片请求加上时间戳
  49. var timestamp = +new Date
  50. gulp.src(['dest/css/**'])
  51. .pipe(plugins.replace(/(\/[\w-]*\.(jpg|jpeg|gif|png|bmp|tiff|otf|ttf|woff|svg|webp|swf|htc))/ig, '$1?'+timestamp))
  52. .pipe(gulp.dest('dest/css'));
  53. }
  54. })
  55. })
  56. gulp.task('build_js', function() {
  57. return gulp.src('src/js/**')
  58. .pipe(plugins.uglify())
  59. .pipe(plugins.header(banner, { pkg : pkg } ))
  60. .pipe(gulp.dest('dest/js'))
  61. })
  62. gulp.task('build_img', function() {
  63. return gulp.src(['src/img/**', '!src/img/**/*.psd', '!src/img/slice/**'])
  64. .pipe(plugins.imagemin({
  65. progressive: true
  66. }))
  67. .pipe(gulp.dest('dest/img'))
  68. })
  69. gulp.task('build_fonts', function() {
  70. return gulp.src('src/fonts/**')
  71. .pipe(gulp.dest('dest/fonts'))
  72. })
  73. gulp.task('build_html', ['build_ejs'], function() {
  74. return gulp.src(['src/*.html'])
  75. .pipe(gulp.dest('dest'))
  76. })
  77. gulp.task('build_ejs', function() {
  78. return gulp.src('src/tpl/*.ejs')
  79. .pipe(plugins.ejs().on('error', console.log))
  80. .pipe(gulp.dest('src/'))
  81. })
  82. gulp.task('build_clean', function() {
  83. del.sync(['dest/**'])
  84. })
  85. gulp.task('build', ['build_clean', 'build_html', 'build_sprite', 'build_js', 'build_img', 'build_fonts'], function(){
  86. browserSync({
  87. server: {
  88. baseDir: "dest",
  89. directory: true
  90. },
  91. notify: false,
  92. ghostMode:false,
  93. codeSync: false,
  94. port: that.port,
  95. open: "external",
  96. browser: "/Applications/Google\ Chrome.app/"
  97. })
  98. })
  99. gulp.task('dest', function(){
  100. browserSync({
  101. server: {
  102. baseDir: "dest",
  103. directory: true
  104. },
  105. notify: false,
  106. ghostMode:false,
  107. codeSync: false,
  108. port: that.port,
  109. open: "external",
  110. browser: "/Applications/Google\ Chrome.app/"
  111. })
  112. })
  113. }