Django to build a large enterprise's official website (II)

Third, the project build environment

3.1. Creating a project environment and installation package

Create a django project

mkvirtualenv DjangoProject

workon DjangoProject 

pip install -i https://pypi.douban.com/simple django==2.0.2

Into the front directory

the init npm     # initialize a configuration file package.json

Add the packages to install in package.json file

"devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-cache": "^1.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^6.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sync": "^0.1.4",
    "gulp-tinypng-nokey": "^1.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1"
  }

{
  "name": "xfz_front",
  "version": "1.0.0",
  "description": "xft front code",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zhang_derek",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-cache": "^1.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^6.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sync": "^0.1.4",
    "gulp-tinypng-nokey": "^1.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1"
  }
}

View Code

Installation package, the package automatically identify the file needed package.json

npm install

Project Directory Structure

 

3.2. Writing gulpfile.js file

gulp.js

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var tinypng_nokey = require('gulp-tinypng-nokey');
var bs = require("browser-sync").create();

//html任务
gulp.task("html",done =>{
    gulp.src("./templates/**/*.html")
    .pipe(bs.reload({
        stream: true
    }));
    done();
});


// CSS Task 
gulp.task ( "CSS", DONE => { 
    gulp.src ( "./src/css/*.css" ) 
    .pipe (cssnano ())    // compression 
    .pipe (rename ({ "suffix ":." min "}))   // suffix name 
    .pipe (gulp.dest ( './ dist / CSS /'))    // compressed storage path 
    .pipe (bs.reload ({ 
        Stream: to true 
    } )); 
    DONE (); 
}); 

// JS task 
gulp.task ( "JS", DONE => { 
    gulp.src ( "./src/js/*.js" ) 
    .pipe (uglify ({
         'toplevel ': to true ,
         ' the compress':{
            'drop_console':true
        }
    }))
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(bs.reload({
        stream: true
    }));
    done();
});

//images任务
gulp.task("images",done =>{
    gulp.src("./src/images/*.*")
    .pipe(tinypng_nokey())
    .pipe(gulp.dest('./dist/images/'))
    .pipe(bs.reload({
        stream: true
    }));
    done();
});

listening//
gulp.task('auto',function () {
    gulp.watch("./templates/**/*.html",gulp.series('html'));
    gulp.watch("./src/css/*.css",gulp.series('css'));
    gulp.watch("./src/js/*.js",gulp.series('js'));
    gulp.watch("./src/images/*.*",gulp.series('images'));
});

//初始化
gulp.task("bs",function () {
    bs.init({
        'server':{
            'baseDir':'./',
        }
    })
});


gulp.task ( "default", gulp.parallel (create a default task//

3.3.css changed sass

Sass installation package

npm install gulp-sass --save-dev

The index.css file into index.scss

gulpfile.js modification

var sass = require("gulp-sass");

// css任务
gulp.task("css",done =>{
    gulp.src("./src/css/*.scss")
    .pipe(sass().on("error",sass.logError))
    .pipe(cssnano())   //压缩
    .pipe(rename({"suffix":".min"}))  //加后缀名
    .pipe(gulp.dest('./dist/css/'))   //压缩后存放的路径
    .pipe(bs.reload({
        stream: true
    }));
    done();
});

//监听
gulp.task('auto',function () {
    gulp.watch("./templates/**/*.html",gulp.series('html'));
    gulp.watch("./src/css/*.scss",gulp.series('css'));
    gulp.watch("./src/js/*.js",gulp.series('js'));
    gulp.watch("./src/images/*.*",gulp.series('images'));
});

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var tinypng_nokey = require('gulp-tinypng-nokey');
var bs = require("browser-sync").create();
var sass = require("gulp-sass");



//html任务
gulp.task("html",done =>{
    gulp.src("./templates/**/*.html")
    .pipe(bs.reload({
        stream: true
    }));
    done();
});


// css任务
gulp.task("css",done =>{
    gulp.src("./src/css/*.scss")
    .pipe(sass().on("error",sass.logError))
    .pipe(cssnano())   //压缩
    .pipe(rename({"suffix":".min"}))  //加后缀名
    .pipe(gulp.dest('./dist/css/'))   //压缩后存放的路径
    .pipe(bs.reload({
        stream: true
    }));
    done();
});

//js任务
gulp.task("js",done =>{
    gulp.src("./src/js/*.js")
    .pipe(uglify({
        'toplevel':true,
        'compress':{
            'drop_console':true
        }
    }))
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(bs.reload({
        stream: true
    }));
    done();
});

//images任务
gulp.task("images",done =>{
    gulp.src("./src/images/*.*")
    .pipe(tinypng_nokey())
    .pipe(gulp.dest('./dist/images/'))
    .pipe(bs.reload({
        stream: true
    }));
    done();
});

//监听
gulp.task('auto',function () {
    gulp.watch("./templates/**/*.html",gulp.series('html'));
    gulp.watch("./src/css/*.scss",gulp.series('css'));
    gulp.watch("./src/js/*.js",gulp.series('js'));
    gulp.watch("./src/images/*.*",gulp.series('images'));
});

//初始化
gulp.task("bs",function () {
    bs.init({
        'server':{
            'baseDir':'./',
        }
    })
});

//创建一个默认任务
gulp.task("default",gulp.parallel('bs','auto'));

View Code