Question

我已经获得了一个项目来查看我一无所知，因为我是一名后端开发人员，而且我周围的人也不知道。该结构基本上是 src ， node_modules 和 dist 文件夹的 gulpfile 。 src文件夹中包含.hbs文件。

基本上，我不知道如何让这个项目在浏览器中运行。我猜我需要在节点服务器上运行这个项目？我真的不知道从哪里开始。

请告知。

var gulp         = require('gulp');
var plumber      = require('gulp-plumber');
var sass         = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss    = require('gulp-minify-css');
var jshint       = require('gulp-jshint');
var uglify       = require('gulp-uglify');
var imagemin     = require('gulp-imagemin');
var pngquant     = require('imagemin-pngquant');
var rename       = require('gulp-rename');
var concat       = require('gulp-concat');
var replace      = require('gulp-replace');
var cache        = require('gulp-cache');
var livereload   = require('gulp-livereload');
var hb           = require('gulp-hb');
var minifyHTML   = require('gulp-minify-html');
var del          = require('del');
var awspublish   = require('gulp-awspublish');
var fs           = require('fs');

// DEFAULT
// ======================================================
gulp.task('default', ['clean'], function() {
  gulp.start('templates', 'styles', 'scripts', 'libs', 'images');
});

// TEMPLATES
// ======================================================
gulp.task('templates', function() {
  return gulp.src('./src/*.hbs')
    .pipe(hb({
      partials: ['./src/partials/**/*.hbs']
    }))
    .pipe(minifyHTML())
    .pipe(rename(function(path){
      path.extname = ".html";

      if (path.basename == "index") { return; }

      path.dirname = path.basename.split('-').join('/');
      path.basename = "index";
    }))
    .pipe(gulp.dest('./dist/'));
});

// STYLES
// ======================================================
gulp.task('styles', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({
      style: 'expanded',
      "sourcemap=none": true
    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/assets/css'))
});

// SCRIPTS
// ======================================================
gulp.task('scripts', function() {
  return gulp.src('src/scripts/main.js')
    .pipe(plumber())
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
});

// LIBS
// ======================================================
gulp.task('libs', function() {
  return gulp.src('src/scripts/lib/*.js')
    .pipe(gulp.dest('dist/assets/js/lib'))
});

// IMAGES
// ======================================================
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin({
        progressive: true,
        use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/assets/img'))
});

// CLEAN
// ======================================================
gulp.task('clean', function(cb) {
  del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb);
});

// WATCH
// ======================================================
gulp.task('watch', function() {
  gulp.watch('src/**/*.hbs', ['templates']);
  gulp.watch('src/styles/**/*.scss', ['styles']);
  gulp.watch('src/scripts/**/*.js', ['scripts']);
  gulp.watch('src/images/**/*', ['images']);

  livereload.listen();
  gulp.watch(['dist/**']).on('change', livereload.changed);
});

// PUBLISH (to S3 Bucket)
// ======================================================
var websiteUrl = '//whatever.com/';
var aws        = JSON.parse(fs.readFileSync('./aws.json'));
var headers    = { 'Cache-Control': 'max-age=315360000, no-transform, public' };
var publisher  = awspublish.create(
  {
    key: aws.key,
    secret: aws.secret,
    bucket: aws.bucket,
    region: aws.region
  }
);

gulp.task('cdnize', function() {
  return gulp.src('./dist/**/*.html')
    .pipe(replace('http://0.0.0.0:8080/', websiteUrl))
    .pipe(gulp.dest('./dist/'))
});

gulp.task('publish', ['cdnize'], function() {
  return gulp.src('./dist/**')
    .pipe(publisher.publish(headers))
    .pipe(awspublish.reporter());
});

Answer 1

只需在命令行上运行gulp

Vieing gulp node hbs项目

1 个答案: