gulp

gulpfile.js

'use strict';

const gulp = require('gulp'),
  watch = require('gulp-watch'),
  prefixer = require('gulp-autoprefixer'),
  uglify = require('gulp-uglify'),
  less = require('gulp-less'),
  requirejsOptimize = require('gulp-requirejs-optimize'),
  sourcemaps = require('gulp-sourcemaps'),
  rigger = require('gulp-rigger'),
  cssmin = require('gulp-clean-css'),
  imagemin = require('gulp-imagemin'),
  pngquant = require('imagemin-pngquant'),
  rimraf = require('rimraf'),
  browserSync = require("browser-sync"),
  reload = browserSync.reload;

const APP_VERSION = 'v.1.0';

const path = {

  build: {
    html: 'build/',
    js: 'build/js/',
    rjs: 'build/js/pages/',
    css: 'build/css/',
    img: 'build/img/',
    fonts: 'build/fonts/'
  },

  src: {
    html: 'src/*.html',
    js: ['src/js/**/*.js', '!src/js/components/**/*.js', '!src/js/pages/*.js'],
    mainConfigFile: 'src/js/common.js',
    rjs: 'src/js/pages/**/*.js',
    style: 'src/css/{pages,components}/*.less',
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*'
  },

  watch: {
    html: 'src/**/*.html',
    // js: ['src/js/**/*.js', '!src/js/components/**/*.js', '!src/js/pages/*.js'],
    // mainConfigFile: 'src/js/common.js',
    rjs: 'src/js/pages/**/*.js',
    style: 'src/css/**/*.less',
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*'
  },

  clean: './build'
};


gulp.task('webserver', function() {
  var config = {
    server: {
      baseDir: "./build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "Frontend_Demon"
  };

  browserSync(config);
});


gulp.task('clean', function(cb) {
  rimraf(path.clean, cb);
});


gulp.task('html:build', function() {
  gulp.src(path.src.html)
    .pipe(rigger())
    .pipe(gulp.dest(path.build.html))
    .pipe(reload({
      stream: true
    }));
});


gulp.task('js:build', function() {
  gulp.src(path.src.js)
    .pipe(rigger())
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.js))
    .pipe(reload({
      stream: true
    }));
});


// require page模块压缩后复制到发布文件夹
gulp.task('r-js:build', function() {
  return gulp.src(path.src.rjs)
    .pipe(requirejsOptimize(function(file) {
      // console.log("what's", file);
      return {
        // todo 动态名称未实现
        name: 'pages/index',
        mainConfigFile: path.src.mainConfigFile,
        exclude: [
          'jquery',
          'flexSlider',
          'underscore',
          'backbone',
          'text',
          'i18n'
        ]
      };
    }))
    .pipe(gulp.dest(path.build.rjs));
});

gulp.task('style:build', function() {
  gulp.src(path.src.style)
    .pipe(sourcemaps.init())
    .pipe(less({
      includePaths: ['src/css/'],
      outputStyle: 'compressed',
      sourceMap: true,
      errLogToConsole: true
    }))
    .pipe(prefixer())
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.css))
    .pipe(reload({
      stream: true
    }));
});


gulp.task('image:build', function() {
  gulp.src(path.src.img)
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{
        removeViewBox: false
      }],
      use: [pngquant()],
      interlaced: true
    }))
    .pipe(gulp.dest(path.build.img))
    // Todo 精灵图相关未实现
    // .pipe(reload({
    //   stream: true
    // }));
});


gulp.task('fonts:build', function() {
  gulp.src(path.src.fonts)
    .pipe(gulp.dest(path.build.fonts))
});


gulp.task('build', [
  'html:build',
  'js:build',
  'r-js:build',
  'style:build',
  'fonts:build',
  'image:build'
]);

gulp.task('watch', function() {
  watch([path.watch.html], function(event, cb) {
    gulp.start('html:build');
  });
  watch([path.watch.style], function(event, cb) {
    gulp.start('style:build');
  });
  // watch([path.watch.js], function(event, cb) {
  //   gulp.start('js:build');
  // });
  watch([path.watch.rjs], function(event, cb) {
    gulp.start('js:build');
    gulp.start('r-js:build');
  });
  watch([path.watch.img], function(event, cb) {
    gulp.start('image:build');
  });
  watch([path.watch.fonts], function(event, cb) {
    gulp.start('fonts:build');
  });
});

gulp.task('default', ['build', 'webserver', 'watch']);