2

私は JavaScript 開発の現場に不慣れで、現在、まともなワークフローを進めようとしています。ただし、Gulp の仕組みを理解するのに苦労しています。npm を使用して依存関係をインストールし、自分の能力が及ぶ限り、gulpfile を作成しました。

var gulp = require('gulp'), 
minifycss = require('gulp-minify-css'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
minifyhtml = require('gulp-minify-html'),
sass = require('sass'),
notify = require('gulp-notify');

gulp.task('js', function() {
    return gulp.src('js/**/*.js')
        .pipe(uglify({
            outSourceMap: true
        }))
        .pipe(gulp.dest('dist/assets/js'));
});

//This task should compile my scss-files into corresponding css-files in the css-folder. 
//If possible I would like to have it automatically detect which folder the file is in. 
//Ie: scss/user/main.scss should compile to css/user/main.css
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

gulp.task('css', function() {
    return gulp.src('css/*.css')
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios     6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/assets/css'));
});

//This task should check all html-files in directory, and then minify them into     corresponding folders in dist/assets/html. 
//Ie: html/user/index.html should be minified into dist/assets/html/user/index.html.
gulp.task('html', function() {
    return gulp.src('html/*/*.html')
        .pipe(minifyhtml())
        .pipe(gulp.dest('dist/assets/html'));
});

//I know run() is depreceated. What to do? How should these be written?
gulp.task('default', function() {
    gulp.watch('scss/*.scss', function() {
        gulp.run('sass')
    });
    gulp.watch(['html/user/*.html', 'html/support/*.html'], function() {
        gulp.run('html');
    });
    gulp.watch('js/**/*.js', function() {
        gulp.run('js');
    });
    gulp.watch('css/*.css', function() {
        gulp.run('css');
    });
});

思ったようにうまくいかないし、何を検索すればいいのかわからないままグーグルするのは本当に大変です。いくつかのブログを読みましたが、残念ながらその方法を理解できませんでした。run() を使用すべきではないことは承知していますが、その場合、どのようにコードを記述すればよいでしょうか?

誰かが依存関係が実際に何であるかをわかりやすい英語で説明できれば、私は本当に感謝しています. これも海で。

お時間を割いていただきありがとうございます。

アントン

4

1 に答える 1

3

組み込みの gulp.watch メソッドを使用できます。gulp の利点の 1 つは、一般的なタスクを関数として宣言して再利用できることです。

構文の例を次に示します。

var paths = {
  scripts: './lib/**/*.js',
  tests: './test/**/*.js'
};

function lint(src){
  return gulp.src(src)
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter(stylish));
}

gulp.task('lint', function () { 
  lint([paths.scripts, paths.tests]);
});

gulp.task('test', function() { 
  // put your test pipeline here
});

gulp.task('watch', function () {

  // watch and lint any files that are added or changed
  gulp.watch([paths.scripts, paths.tests, paths.demo], function(event){
    if(event.type !== 'deleted') { 
      lint([event.path]); 
    }
  });

  // run all the tests when something changes
  gulp.watch([paths.scripts, paths.tests], ['test']); 

});
于 2014-02-18T21:23:54.827 に答える