gulp：构建代码并在浏览器中启动它 [英] gulp: build the code and start it in the browser

问题描述

所以我想为一个web项目使用 elm 语言，并且我需要该项目位于 visual studio 2015 我正在使用gulp。我的问题是，我不知道如何创建构建代码并在浏览器中启动代码的 gulp任务。这是我到目前为止所做的：

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'）
 
 //文件路径
 var paths = {
 dest：' build'，
 elm：'src / *。elm'，
 static：'src / *。{html，css}'
} 
 
 // Init Elm 
 gulp.task（'elm-init'，elm.init）
 
 //将Elm编译为HTML 
 gulp.task（'elm'，['elm-init '），function（）{
 return gulp.src（paths.elm）
 .pipe（plumber（））
 .pipe（elm（））
 .pipe（gulp .dest（paths.dest））
}）
 
 //将静态资产移动到dist 
 gulp.task（'static'，function（）{
 return gulp.src（paths.static）
 .pipe（plumber（））
 .pipe（gulp.dest（paths.dest））
}）
 
 / /观察变化并编译
 gulp.task（'watch'，function（）{
 gulp.watch（paths.elm，['elm']）
 gulp.watc h（paths.static，['static']）
}）
 
 //本地服务器
 gulp.task（'connect'，function（）{
 connect.server（{
 root：'dist'，
 port：3000 
}）
}）
 
 //主要任务任务$ b $ 
 gulp.task（'default'，['connect'，'build'，'watch']）
 <'build'，['elm'，'static']） / code> 

connect 任务不会在浏览器中打开网站。那么，如何实现这一目标呢？我想通过点击一个任务（在Visual Studio的任务资源管理器窗口中）来启动该站点，然后单击开始并编译代码并开始。 / p>

解决方案

gulp-connect 包不会自动打开浏览器窗口为你。它可能已经在旧版本中完成了。

但是， gulp-connect-multi ，其中包括在连接上打开浏览器的功能。

b
$ b

否则，您可以使用 gulp-open 直接打开浏览器窗口。

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

解决方案

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.

这篇关于gulp：构建代码并在浏览器中启动它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！