gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// 引入 gulp
var gulp = require('gulp'),
  jshint = require('gulp-jshint')
  uglify = require('gulp-uglify'),
  sass = require('gulp-sass'),
  minifyCss = require('gulp-minify-css'),
  imagemin = require('gulp-imagemin'),
  watchPath = require('gulp-watch-path'),
  notify = require("gulp-notify"),
  browserSync = require('browser-sync').create(),
  reload = browserSync.reload;

var handleErrors = function(){
  var args = Array.prototype.slice.call(arguments);
  // console.log(JSON.stringify(arguments));
  notify.onError({
    title: 'compile error',
    message: '<%=error.message %>, at line : <%=error.lineNumber %>'
  }).apply(this, args);//替换为当前对象
  this.emit();//提交
}
// 压缩js文件
gulp.task('script', function() {
    gulp.src('src/js/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(uglify())
        .on('error', handleErrors)
        .pipe(gulp.dest('app/js'));
});
// 编译scss或sass文件
gulp.task('sass', function() {
    gulp.src('src/scss/**/*')
        .pipe(minifyCss())
        .pipe(gulp.dest('app/css'));
});
// 压缩css文件
gulp.task('css', function() {
    gulp.src('src/css/**/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('app/css'));
});
// 压缩img文件
gulp.task('img', function(){
    gulp.src('src/img/**/*.*')
        .pipe(imagemin())
        .on('error', handleErrors)
        .pipe(gulp.dest('app/img'));
});
gulp.task('minAll', function(){
    gulp.run('script', 'css', 'img');
});

// 监听js文件的变化，压缩有变化的文件
gulp.task('watchJs', function(){
  var src = 'src/js/**/';
  gulp.watch(src + '*', function(event){
    var paths = watchPath(event , src , 'app/js/');
    console.log(paths.srcFilename + ' has ' + event.type);
    if(paths.srcFilename.indexOf('.js')>-1){
      gulp.src(src + paths.srcFilename)
          .pipe(jshint())
          .pipe(jshint.reporter('default'))
          .pipe(uglify())
          .on('error', handleErrors)
          .pipe(gulp.dest('app/js/')).on('change', reload);
    }
  });
});
gulp.task('watchSass', function() {
  var src = 'src/scss/**/';
  gulp.watch(src + '*', function(event){
    var paths = watchPath(event , src , 'app/css/');
    console.log(paths.srcFilename + ' has ' + event.type);
    if(paths.srcFilename.indexOf('.scss')>-1 || paths.srcFilename.indexOf('.sass')>-1){
      gulp.src('src/scss/**/' + paths.srcFilename)
          .pipe(sass())
          .on('error', handleErrors)
          .pipe(minifyCss())
          .pipe(gulp.dest('app/css/'))
          .pipe(reload({stream: true}));
    }
  });
});
gulp.task('watchHtml', function() {
  gulp.watch([
    './*.html',
    'bdshop/*',
    'login/*',
    'public/*',
    'share/*',
    'subscribe/*']).on('change', reload);
});
gulp.task('watch', ['watchHtml','watchSass','watchJs'], function() {
    browserSync.init({
      proxy: "http://a.easy.com/",
      port: 801
    });
});

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "angular-project",
  "version": "1.0.0",
  "description": "a angular project pack gulp's file",
  "main": "index.js",
  "keywords": [],
  "author": "Jim",
  "dependencies": {
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.0.2",
    "gulp-jshint": "^2.0.1",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^1.5.4",
    "gulp-watch-path": "^0.1.0",
    "jshint": "^2.9.2"
  }
}