gulp 在收集 Django 静态文件的一点应用

Django 有一点特别，一点是URL需要配置，一点是文件目录结构比较特别。

当前端部分采用如下的目录结构时，Django 就需要收集静态文件和模板文件到相应的目录，可以使用自动构建工具gulp来帮助我们做这些事。

C:.
├─dlt
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
├─five
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
|....
├─query
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
├─six
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
└─three
    ├─css
    ├─font
    ├─img
    ├─js
    └─scss

主要就是3件事，一是静态文件收集，二是模板文件收集，三是模板文件内容中关于静态文件路径的修改。

利用npm init来新建项目的package.json文件

> npm init

利用npm install来安装gulp和gulp插件

> npm install --save-dev gulp
> npm install --save-dev gulp-uglify

创建gulp文件gulpfile.js

> touch gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('uglify', function(){
    return gulp.src('*/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('../dest/static/lab'));
});

gulp.task('static', function(){
    return gulp.src(['*/css/*.css', '*/img/*', '*/font/*'])
    .pipe(gulp.dest('../dest/static/lab'));
});

gulp.task('templates', function(){
    return gulp.src('*/*.html')
    .pipe(gulp.dest('../dest/templates/lab'));
});

gulp.task('default', ['uglify', 'static', 'templates'], function(){

});

在终端运行gulp命令

> gulp

这样就生成了与当前目录平行的目录dest，该dest目录中包含文件夹static和templates。

C:.
├─static
│  └─lab
│      ├─dlt
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      ├─five
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      ├─four
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      ├─jclq
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      ├─jczq
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      ├─nine
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      ├─query
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      ├─six
│      │  ├─css
│      │  ├─font
│      │  ├─img
│      │  └─js
│      └─three
│          ├─css
│          ├─font
│          ├─img
│          └─js
└─templates
    └─lab
        ├─dlt
        ├─five
        ├─four
        ├─jclq
        ├─jczq
        ├─nine
        ├─query
        ├─six
        └─three

挺方便的。还有一件事要做，更改模板文件中link和script的路径。

利用gulp-html-replace插件需要在模板文件中创建build块

<!-- build:css -->
<link rel="stylesheet" href="css/index.css">
<!-- endbuild -->
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!-- build:js -->
<script src="js/index.js"></script>
<!-- endbuild -->

然后编码gulpfile脚本运行gulp replace

var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');

gulp.task('replace', function(){
    return gulp.src('*/*.html')
    .pipe(htmlreplace({
        js: {
            src: '/static/lab',
            tpl: '<script src="%s/%f.js"></script>'
        },
        css: {
            src: '/static/lab',
            tpl: '<link rel="stylesheet" href="%s/%f.css">'
        }
    }))
    .pipe(gulp.dest('../dest/templates/lab/'));
});

模板文件存放路径仍有问题，与其费事写build块，不如直接手动修改模板文件中link和script的路径。