npmプロジェクトを0からはじめるメモ

yeomanとか使うと便利ですが、いらない設定がされていたりタスクランナーがgulpじゃなくてgruntだったりと不都合があるのでnpmプロジェクトを自分で0から作る方法をまとめておくことにした。

準備

適当な名前でプロジェクトディレクトリを用意して npm init するのです(`・ω・´)

$ mkdir node-project
$ cd node-project
$ npm init

ディレクトリ構造

Railsプロジェクトを模して作る

/- app/
|  |- index.coffee
|  |- assets/
|- config/
|- public/
|- package.json

package.json

scriptsセクションにstartタスクを追加。

"scripts": {
    "start": "node ./dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
}

gulp一式インスコ

• D を忘れずに。

$ npm i gulp gulp-coffee gulp-shell gulp-webpack webpack coffee-loader -D

webpackの設定

フロント側のjsはwebpackで固めるよ(`・ω・´)

module.exports = {
  entry: './app/assets/javascripts/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee' }
    ]
  }
};

タスクランナー

最近はgruntよりgulpが主流！
gulpfileはCoffeeScriptやTypeScriptでも書けるよ！

var gulp    = require('gulp');
var coffee  = require('gulp-coffee');
var webpack = require('gulp-webpack');
var shell   = require('gulp-shell');

gulp.task('default', ['build:server', 'build:assets']);
gulp.task('build:server', () => {
  gulp.src([
    'app/**/*.coffee',
    '!app/assets/**/*.coffee'  // クライアント側はwebpackで固める
  ])
  .pipe(coffee())
  .pipe(gulp.dest('dist'));
});

gulp.task('build:assets', () => {
  gulp.src(['app/assets/javascripts/**/*.coffee'])
  .pipe(webpack(require('webpack.config')))
  .pipe('public/assets/javascripts');
});

gulp.task('run', shell('npm run start'));