gulp: build the code and start it in the browser

拟墨画扇 提交于 2019-12-11 04:16:06

问题


So I want to use elm language for a web project and I need the project to be in visual studio 2015 and I am using gulp. My issue is that I don't know how to create a gulp task that builds the code and starts it in the browser. Here is what I've done so far:

gulpfile.js:

/// <binding ProjectOpened='default' />
var gulp = require('gulp')
var elm = require('gulp-elm')
var gutil = require('gulp-util')
var plumber = require('gulp-plumber')
var connect = require('gulp-connect')

// File paths
var paths = {
    dest: 'build',
    elm: 'src/*.elm',
    static: 'src/*.{html,css}'
}

// Init Elm
gulp.task('elm-init', elm.init)

// Compile Elm to HTML
gulp.task('elm', ['elm-init'], function () {
    return gulp.src(paths.elm)
      .pipe(plumber())
      .pipe(elm())
      .pipe(gulp.dest(paths.dest))
})

// Move static assets to dist
gulp.task('static', function () {
    return gulp.src(paths.static)
      .pipe(plumber())
      .pipe(gulp.dest(paths.dest))
})

// Watch for changes and compile
gulp.task('watch', function () {
    gulp.watch(paths.elm, ['elm'])
    gulp.watch(paths.static, ['static'])
})

// Local server
gulp.task('connect', function () {
    connect.server({
        root: 'dist',
        port: 3000
    })
})

// Main gulp tasks
gulp.task('build', ['elm', 'static'])
gulp.task('default', ['connect', 'build', 'watch'])

The connect task does not opens the site in the browser. So, how to achieve this? I want to start the site by clicking on a task (from the task explorer windows in visual studio) and click start and it should compile the code and start.

Thanks


回答1:


The gulp-connect package doesn't automatically open a browser window for you. It may have done so in older versions.

However, there is a fork in the gulp-connect-multi that includes the ability to open a browser on connect.

Otherwise, you can use the gulp-open package directly to open a browser window.



来源:https://stackoverflow.com/questions/40914056/gulp-build-the-code-and-start-it-in-the-browser

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!