创建Gulp任务但不工作,为什么?

时间:2015-02-17 18:10:31

标签: javascript gulp

根据Gulp Docs的说法,根据我所看到的,我的一切都很好。

之前,让我们说一周前,我在Sublime Text上做ctrl + s,我的视图(浏览器)会自动重新加载。现在,在与master分支进行一些合并之后,这些任务不再起作用了,没有任何东西在重新加载,我每次想要看到更改时都必须进入我的控制台Gulp,我讨厌它。我打算将gulpfile.js粘贴到这里,所以也许你有一个答案给我

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    gutil = require('gulp-util'),
    bower = require('bower'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    sh = require('shelljs'),
    jshint = require('gulp-jshint'),
    jscs = require('gulp-jscs'),
    shell = require('gulp-shell'),
    uglify = require('gulp-uglify'),
    ngAnnotate = require('gulp-ng-annotate');

var paths = {
  sass: ['./scss/**/*.scss']
};

// Dev task
gulp.task('dev', ['sass', 'lint', 'compress-lib', 'compress-js', 'run-ionic'], function() { });

// Build task


gulp.task('default', ['dev']);

//Ionic Serve Task
gulp.task('run-ionic',shell.task([
  'ionic serve'
]));

gulp.task('compress-lib', function() {
  gulp.src([
    './www/lib/ionic/js/ionic.bundle.min.js',
    './www/lib/localforage/dist/localforage.min.js',
    './www/lib/lodash/lodash.min.js',
    './www/lib/moment/moment.js',
    './www/lib/validator-js/validator.min.js',
    './www/lib/localforage-wrapper/localforage-wrapper.js',
    './www/lib/ua-parser-js/dist/ua-parser.min.js'
  ])
    .pipe(concat('lib.min.js'))
    .pipe(gulp.dest('./www/js'))
});

gulp.task('compress-js', function() {
  gulp.src([
    './www/js/app.js',
    './www/js/controllers.js',
    './www/js/common/footerController.js',
    './www/js/common/sportsFilter.js',
    './www/js/common/searchBarDirective.js',
    './www/js/auth/controller.js',
    './www/js/auth/service.js',
    './www/js/auth/interceptor.js',
    './www/js/auth/logoutController.js',
    './www/js/sports/controller.js',
    './www/js/sports/service.js',
    './www/js/leagues/service.js',
    './www/js/lines/controller.js',
    './www/js/lines/service.js',
    './www/js/betSlip/controller.js',
    './www/js/betSlip/service.js',
    './www/js/deviceDetector/service.js'
  ])
    .pipe(ngAnnotate())
    .pipe(concat('code.min.js'))
    .pipe(gulp.dest('./www/js'))
});

// JSHint task
gulp.task('lint', function() {
  gulp.src(['www/js/*.js', 'www/js/**/*.js', '!www/js/lib.min.js', '!www/js/code.min.js'])
      .pipe(jscs())
      .pipe(jshint())
      .pipe(jshint.reporter('default'));

});

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({onError: function(e) { console.log(e); } }))
    .pipe(autoprefixer('last 2 versions', 'Chrome', 'ios_saf','Android'))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

所有我需要的是重新加载部分,每当我在我的IDE中save -- ctrl + s时,我想自动看到浏览器中的变化,我浪费了很多时间去控制台和键入gulp时间我希望看到更改。

2 个答案:

答案 0 :(得分:2)

你应该检查git中gulp文件发生了什么变化,然后对两个版本进行区分,看看有什么变化。

$ git log gulpfile.js
$ git diff <commit id> gulpfile.js

答案 1 :(得分:1)

关于浏览器不刷新,可能是LiveReload的问题。检查ionic.project文件中的watchPatterns配置。

https://github.com/driftyco/ionic-cli#testing-in-a-browser

更改文件后,gulp没有运行:

听起来有人可能已经移动了一些文件。确认此路径仍指向您要观看的文件:   sass: ['./scss/**/*.scss']。如果不是,请更新并运行gulp watch

请注意gulp.watch()无法检测到新文件,因此每次创建新的可观察文件时都需要重新启动。