欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Django打造大型企业官网(二)

程序员文章站 2022-03-22 12:05:11
三、项目环境搭建 3.1.创建项目环境和安装包 创建django项目 进front目录 在package.json文件中添加要安装的包 { "name": "xfz_front", "version": "1.0.0", "description": "xft front code", "main" ......

三、项目环境搭建

3.1.创建项目环境和安装包

创建django项目

mkvirtualenv djangoproject

workon djangoproject 

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

进front目录

npm init    #初始化一个package.json配置文件文件

在package.json文件中添加要安装的包

"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"
  }
}

安装包,自动识别package.json文件中需要的包

npm install

项目目录结构

 Django打造大型企业官网(二)

3.2.编写gulpfile.js文件

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任务
gulp.task("css",done =>{
    gulp.src("./src/css/*.css")
    .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/*.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('bs','auto'));

3.3.css改为sass

安装sass包

npm install gulp-sass --save-dev

Django打造大型企业官网(二)

把index.css改成index.scss文件

Django打造大型企业官网(二)

gulpfile.js修改

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'));