Instantly share code, notes, and snippets.

Embed
What would you like to do?
gulpとjasmine2の環境を整理するまで

project作成

mkdir your_project
cd your_project

gulp install

$ npm init .
$ npm install --save-dev gulp

karma install

npm install --save-dev karma karma-jasmine@2_0 karma-chrome-launcher

karma conf

$ karma init karma.conf.js

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> *.js

>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "/path/to/your/project/karma.conf.js".

bower

  • gulpの前にbower用意しておく
bower init .

gulpfile(coffee)

  • 準備
npm install --save-dev coffee-script gulp-load-plugins gulp-concat gulp-open gulp-connect gulp-uglify gulp-jshint main-bower-files gulp-compass gulp-csso gulp-concat-css

vim gulpfile.coffee
  • gulpfile内
gulp = require('gulp')
pl = require('gulp-load-plugins')()
mainBowerFiles = require('main-bower-files')
path = require('path')

projectName = "your_project"
localPort = '8080'

src =
  scripts:   "app/scripts/**/*.js"
  html:      "app/**/*.html"
  styles:    "app/styles/**/*.scss"
  dirStyles: "app/styles/"

dist = 
  dir:      "dist"
  dirJs:    "dist/scripts/"
  dirBower: "dist/scripts/lib/"
  dirCss:   "dist/styles/"
  index:    "index.html"

# build
gulp.task 'hint', ->
  gulp.src(src.scripts)
    .pipe(pl.jshint())
    .pipe(pl.jshint.reporter("default"))

gulp.task 'scripts', ['hint'], ->
  gulp.src([src.scripts ])
    .pipe(pl.uglify())
    .pipe(pl.concat(projectName + ".js"))
    .pipe(gulp.dest(dist.dirJs))
    .pipe(pl.connect.reload())

gulp.task 'bower', ->
  gulp.src(mainBowerFiles())
    .pipe(gulp.dest(dist.dirBower))

gulp.task 'styles', ->
  gulp.src(src.styles)
    .pipe(pl.compass(project: path.join(__dirname, src.dirStyles)))
    .pipe(pl.csso())
    .pipe(pl.concatCss(projectName + ".css"))
    .pipe(gulp.dest(dist.dirCss))
    .pipe(pl.connect.reload())

gulp.task 'html', ->
  gulp.src(src.html)
    .pipe(gulp.dest(dist.dir))
    .pipe(pl.connect.reload())

gulp.task 'build', ['scripts', 'bower', 'styles', 'html']

# server
gulp.task 'connect', ["build"], ->
  pl.connect.server(
    root: dist.dir
    livereload: true
    port: localPort
  )

gulp.task 'server', ['connect'], ->
  gulp.src(dist.dir + "/" + dist.index)
    .pipe(pl.open('', {url: 'http://localhost:' + localPort + '/' + dist.index}))

# watch
gulp.task 'watch', ->
  gulp.watch(src.scripts, ['scripts'])
  gulp.watch(src.styles,  ['styles'])
  gulp.watch(src.html,    ['html'])

# default
gulp.task 'default', ["server", "watch"]
  • ちなみに、sass/compass入れてない人は入れよう
  • gem install sass compass
  • あと、dir作らないといけないかも

jasmine2でcoffee

npm install karma-coffee-preprocessor --save-dev
  • karma.config.js
    files: [
      'tests/**/*_spec.coffee'
    ],

    preprocessors: {
        "tests/**/*.coffee": ['coffee']
    },


html fixture

npm install karma-html2js-preprocessor --save-dev
  • karma.conf.js
    files: [
      'app/scripts/**/*.js',
      'tests/fixtures/*.html',
      'tests/**/*_spec.coffee'
    ],

    preprocessors: {
        "tests/**/*.coffee": ['coffee'],
        "tests/fixtures/*.html": ['html2js']
    },


gitignore

$ vim .gitignore

node_modules
bower_components

sinon

bower install --save-dev sinon

jst

  • npm install --save-dev gulp-jst-concat
gulp.task "jst", ->
  fs.readdir src.dirScripts, (err, files) ->
    files.map (file) ->
      if fs.statSync(src.dirScripts + file).isDirectory()
        gulp.src([src.dirScripts + file + "/templates/*.html"])
          .pipe(pl.jstConcat("jst.js", {
            renameKeys: ['^.*([^\/]+)\.html', '$1']
          }))
          .pipe(gulp.dest(src.dirScripts + file + '/templates/'))

image sprite

  • gulp.coffee変更
  • /styles/images/*/.png
  • styles/sass/base.scss
@import "compass/utilities/sprites";
@import "monsters/*.png";
@include all-monsters-sprites;

$sprite-default-size:120px;
gulp = require('gulp')
pl = require('gulp-load-plugins')()
mainBowerFiles = require('main-bower-files')
path = require('path')
projectName = "cron_monster"
localPort = '8080'
src =
scripts: "app/scripts/**/*.js"
html: "app/**/*.html"
styles: "app/styles/**/*.scss"
dirStyles: "app/styles/"
spriteImage: "app/styles/images/*.png"
dist =
dir: "dist"
dirJs: "dist/scripts/"
dirBower: "dist/scripts/lib/"
dirCss: "dist/styles/"
index: "index.html"
images: "dist/styles/images/"
# build
gulp.task 'hint', ->
gulp.src(src.scripts)
.pipe(pl.jshint())
.pipe(pl.jshint.reporter("default"))
gulp.task 'scripts', ['hint'], ->
gulp.src([src.scripts ])
.pipe(pl.uglify())
.pipe(pl.concat(projectName + ".js"))
.pipe(gulp.dest(dist.dirJs))
.pipe(pl.connect.reload())
gulp.task 'bower', ->
gulp.src(mainBowerFiles())
.pipe(gulp.dest(dist.dirBower))
gulp.task 'styles:conpass', ->
gulp.src(src.styles)
.pipe(pl.compass(project: path.join(__dirname, src.dirStyles)))
.pipe(pl.csso())
.pipe(pl.concatCss(projectName + ".css"))
.pipe(gulp.dest(dist.dirCss))
gulp.task 'styles:image', ['styles:conpass'], ->
gulp.src(src.spriteImage)
.pipe(gulp.dest(dist.images))
.pipe(pl.connect.reload())
gulp.task 'styles', ['styles:image']
gulp.task 'html', ->
gulp.src(src.html)
.pipe(gulp.dest(dist.dir))
.pipe(pl.connect.reload())
gulp.task 'build', ['scripts', 'bower', 'styles', 'html']
# server
gulp.task 'connect', ["build"], ->
pl.connect.server(
root: dist.dir
livereload: true
port: localPort
)
gulp.task 'server', ['connect'], ->
gulp.src(dist.dir + "/" + dist.index)
.pipe(pl.open('', {url: 'http://localhost:' + localPort + '/' + dist.index}))
# watch
gulp.task 'watch', ->
gulp.watch(src.scripts, ['scripts'])
gulp.watch(src.styles, ['styles'])
gulp.watch(src.html, ['html'])
# default
gulp.task 'default', ["server", "watch"]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment