0

I'm trying to grap my head around gulp. I managed to write gulpfile.js for my basic page scaffolding, but i've problems with running serveral task in order.

I'm trying to generate css/main.css file from scss files, copy it to dist/css/ and then inject my js and css files into index.html (with gulp-inject).

(function (r) {
  var gulp = r('gulp');
  var del = r('del');
  var wiredep = r('wiredep');
  var $ = r('gulp-load-plugins')();
  // var runSequence = require('run-sequence');


  var config = {
    css_files: './css/*.css',
    sass_files: './scss/*.scss',
    main_sass: './scss/main.scss',
    main_css: './css/main.css',
    css_dir: './css/',
    js_files: './js/*.js',
    main_js: './js/main.js',
    index: [
      './index.html',
      '**/index.html',
    '!node_modules/**/*.*',
    '!bower_components/**/*.*',
    ],
    dist: './dist/',
  };

  function clean(cb) {
    del.sync([
      config.css_files,
      config.dist + config.css_files,
      config.dist + config.js_files,
      config.dist + config.index[0],
      config.dist + config.index[1],
      config.dist + '**/*.map',
    ]);
    cb();
  }

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

  gulp.task('scss', function (cb) {
    gulp
    .src(config.sass_files)
    .pipe($.plumber())
    .pipe($.sass())
    .pipe(gulp.dest(config.css_dir));
    cb();
  });

  gulp.task('js', function (cb) {
    gulp
    .src(config.js_files)
    .pipe($.concat('main.js'))
    .pipe($.sourcemaps.init())
    .pipe($.uglify())
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(config.dist + 'js/'));
    cb();
  });

  gulp.task('css', ['scss'], function (cb) {
    gulp
    .src(config.css_files)
    .pipe($.sourcemaps.init())
    .pipe($.uglifycss())
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(config.dist + 'css/'));
    cb();
  });

  function wd(cb) {
    wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
    wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
    cb();
  }

  gulp.task('wd', function (cb) {
    wd(cb);
  });

  gulp.task('inject-dev', ['wd'], function (cb) {
    var src = ['!dist/**/*.*'].concat(config.index);
    gulp
    .src(src)
    .pipe($.inject(gulp.src([config.css_files, config.js_files])))
    .pipe(gulp.dest('./'));
    cb();
  });

  gulp.task('inject-dist', ['copy-index'], function (cb) {
    var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
    var target = gulp.src(config.dist + '**/index.html');
    target.pipe($.inject(src, { relative: true }))
    .pipe(gulp.dest(config.dist));
    cb();
  });

  gulp.task('watch', function (cb) {
    gulp.watch(config.sass_files, ['scss']);
    cb();
  });

  gulp.task('copy-index', function (cb) {
    gulp
    .src(config.index, { base: './' })
    .pipe(gulp.dest(config.dist));
    cb();
  });

  gulp.task('build-dist', ['clean', 'css', 'js', 'inject-dist']);
})(require);

ATM result of build-dist is generated js/main.js file, copied index.html and about/index.html, generated main.css in dev dir, but not in dist. Files are not injected in dist/index.html aswell.

λ szuja html-scaffold → λ git master* → tree -L 3 -I 'bower_components|node_modules'
.
├── about
│   └── index.html
├── bower.json
├── css
│   └── main.css
├── dist
│   ├── about
│   │   └── index.html
│   ├── index.html
│   └── js
│       ├── main.js
│       └── main.js.map
├── gulpfile.js
├── index.html
├── js
│   ├── main2.js
│   └── main.js
├── LICENSE
├── package.json
├── README.md
└── scss
    └── main.scss

Edit: Looks like gulp doesn't care about waiting for tasks to finish ignoring callback functions:

[16:15:47] Using gulpfile ~/workdir/html-scaffold/gulpfile.js
[16:15:47] Starting 'clean'...
[16:15:47] Finished 'clean' after 15 ms
[16:15:47] Starting 'scss'...
[16:15:47] Finished 'scss' after 75 ms
[16:15:47] Starting 'css'...
[16:15:47] Finished 'css' after 44 ms
[16:15:47] Starting 'js'...
[16:15:47] Finished 'js' after 74 ms
[16:15:47] Starting 'copy-index'...
[16:15:47] Finished 'copy-index' after 4.27 ms
[16:15:47] Starting 'inject-dist'...
[16:15:47] Finished 'inject-dist' after 13 ms
[16:15:47] Starting 'build-dist'...
[16:15:47] Finished 'build-dist' after 9.01 μs
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: scss/main.css
[16:15:47] gulp-debug: 1 item
4

1 に答える 1