mkdir your_project
cd your_project
$ npm init .
$ npm install --save-dev gulp
npm install --save-dev karma karma-jasmine@2_0 karma-chrome-launcher
$ 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 init .
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
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作らないといけないかも
npm install karma-coffee-preprocessor --save-dev
files: [
'tests/**/*_spec.coffee'
],
preprocessors: {
"tests/**/*.coffee": ['coffee']
},
npm install karma-html2js-preprocessor --save-dev
files: [
'app/scripts/**/*.js',
'tests/fixtures/*.html',
'tests/**/*_spec.coffee'
],
preprocessors: {
"tests/**/*.coffee": ['coffee'],
"tests/fixtures/*.html": ['html2js']
},
$ vim .gitignore
node_modules
bower_components
bower install --save-dev sinon
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/'))
- gulp.coffee変更
- /styles/images/*/.png
- styles/sass/base.scss
@import "compass/utilities/sprites";
@import "monsters/*.png";
@include all-monsters-sprites;
$sprite-default-size:120px;
