Change for docker-compose + Gulp

{{cookiecutter.project_slug}}/compose/local/node/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:8-alpine
+
+WORKDIR /app
+
+COPY ./package.json /app
+
+RUN npm install && npm cache clean --force

{{cookiecutter.project_slug}}/config/settings/local.py

@@ -10,6 +10,9 @@ SECRET_KEY = env('DJANGO_SECRET_KEY', default='!!!SET DJANGO_SECRET_KEY!!!')
 # https://docs.djangoproject.com/en/dev/ref/settings/#allowed-hosts
 ALLOWED_HOSTS = [
     "localhost",
+    { % - if cookiecutter.js_task_runner == 'Gulp' and cookiecutter.use_docker == 'y' %}
+    "django",
+    {%- endif %}
     "0.0.0.0",
     "127.0.0.1",
 ]

{{cookiecutter.project_slug}}/gulpfile.js

@@ -60,9 +60,9 @@ gulp.task('styles', function() {
   return gulp.src(paths.sass + '/project.scss')
     .pipe(sass({
       includePaths: [
-        {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
+        {%- if cookiecutter.custom_bootstrap_compilation == 'y' %}
         paths.bootstrapSass,
-        {% endif %}
+        {%- endif %}
         paths.sass
       ]
     }).on('error', sass.logError))
@@ -84,8 +84,7 @@ gulp.task('scripts', function() {
     .pipe(gulp.dest(paths.js));
 });
 
-
-{% if cookiecutter.custom_bootstrap_compilation == 'y' %}
+{%- if cookiecutter.custom_bootstrap_compilation == 'y' %}
 // Vendor Javascript minification
 gulp.task('vendor-scripts', function() {
   return gulp.src(paths.vendorsJs)
@@ -96,7 +95,7 @@ gulp.task('vendor-scripts', function() {
     .pipe(rename({ suffix: '.min' }))
     .pipe(gulp.dest(paths.js));
 });
-{% endif %}
+{%- endif %}
 
 // Image compression
 gulp.task('imgCompression', function(){
@@ -105,6 +104,7 @@ gulp.task('imgCompression', function(){
     .pipe(gulp.dest(paths.images))
 });
 
+{%- if cookiecutter.use_docker == 'n' %}
 // Run django server
 gulp.task('runServer', function(cb) {
   var cmd = spawn('python', ['manage.py', 'runserver'], {stdio: 'inherit'});
@@ -113,18 +113,23 @@ gulp.task('runServer', function(cb) {
     cb(code);
   });
 });
+{%- endif %}
 
 // Browser sync server for live reload
 gulp.task('browserSync', function() {
     browserSync.init(
       [paths.css + "/*.css", paths.js + "*.js", paths.templates + '*.html'], {
+        {%- if cookiecutter.use_docker == 'n' %}
         proxy:  "localhost:8000"
+        {% else %}
+        proxy:  "django:8000",
+        open: false
+        {%- endif %}
     });
 });
 
 // Watch
 gulp.task('watch', function() {
-
   gulp.watch(paths.sass + '/*.scss', ['styles']);
   gulp.watch(paths.js + '/*.js', ['scripts']).on("change", reload);
   gulp.watch(paths.images + '/*', ['imgCompression']);
@@ -134,5 +139,21 @@ gulp.task('watch', function() {
 
 // Default task
 gulp.task('default', function() {
-    runSequence(['styles', 'scripts', {% if cookiecutter.custom_bootstrap_compilation == 'y' %}'vendor-scripts', {% endif %}'imgCompression'], ['runServer', 'browserSync', 'watch']);
+  runSequence(
+      [
+        'styles',
+        'scripts',
+        {%- if cookiecutter.custom_bootstrap_compilation == 'y' %}
+        'vendor-scripts',
+        {%- endif %}
+        'imgCompression'
+      ],
+      [
+        {%- if cookiecutter.use_docker == 'n' %}
+        'runServer',
+        {%- endif %}
+        'browserSync',
+        'watch'
+      ]
+  );
 });

{{cookiecutter.project_slug}}/local.yml

@@ -72,3 +72,22 @@ services:
     command: /start-celerybeat
 
   {%- endif %}
+  {%- if cookiecutter.js_task_runner == 'Gulp' %}
+
+  node:
+    build:
+      context: .
+      dockerfile: ./compose/local/node/Dockerfile
+    image: my_awesome_project_local_node
+    depends_on:
+      - django
+    volumes:
+      - .:/app
+      # http://jdlm.info/articles/2016/03/06/lessons-building-node-app-docker.html
+      - /app/node_modules
+    command: npm run dev
+    ports:
+      - "3000:3000"
+      - "3001:3001"
+
+  {%- endif %}