django 集成gulp task run来更方便的发布静态文件

基于Adminto3的基本的gulp使用

首先是安装 gulp

$ npm install gulp -g

然后运行到模板文件中，运行

$ npm install

• gulp - recompiles and minifies theme assets into dist directory and starts local server serving the theme.
• gulp build - recompiles and minifies theme assets into dist folder.

迁移步骤

• 将src、package.json和gulpfile.js 拷贝到项目根路径
• 在Template中引入模板文件
• 修改gulpfile.js

将输出路径改到static下面，使用dist来单独隔开

var folder = {
    src: "src/", // source files
    dist: "dist/", // build files
    dist_assets: "collect_web/static/dist/assets/" //build assets files 
};

删除掉HTML相关部分，使用django来管理HTML template，所以不在需要使用gulp来管理了

// copy html files from src folder to dist folder, also copy favicons
function html() {
    var out = folder.dist;

    return gulp
        .src([
            folder.src + "html/*.html",
            folder.src + "html/*.ico", // favicons
            folder.src + "html/*.png"
        ])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file',
            indent: true
        }))
        .pipe(gulp.dest(out));
}

同时删除下面的HTML调用部分

function watchFiles() {
    gulp.watch(folder.src + "html/**", gulp.series(html, reloadBrowserSync));
    gulp.watch(folder.src + "assets/images/**/*", gulp.series(imageMin, reloadBrowserSync));
    gulp.watch(folder.src + "assets/fonts/**/*", gulp.series(fonts, reloadBrowserSync));
    gulp.watch(folder.src + "scss/**/*", gulp.series(css, reloadBrowserSync));
    gulp.watch(folder.src + "js/**/*", gulp.series(javascript, reloadBrowserSync));
}


// default task
gulp.task(
    "default",
    gulp.series(
        copyAssets,
        html,
        imageMin,
        fonts,
        css,
        javascript,
        'watch'
    ),
    function(done) {done();}
);

• 使用npm install 安装
• 开发的时候启动gulp即可，这样在修改的时候就可以自动更新的dist中
• 修改gitignore文件，不要把node_modules文件上传到Git中了
• 修改模板文件的static