zoukankan      html  css  js  c++  java
  • Django打造大型企业官网(二)

    三、项目环境搭建

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

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

    npm install

    项目目录结构

     

    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

    把index.css改成index.scss文件

    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'));
    View Code
  • 相关阅读:
    [NOI2001]炮兵阵地 状压DP
    [GDOI2014]拯救莫莉斯 状压DP
    [ZJOI2010]数字计数 数位DP
    [APIO2007]动物园 状压DP
    [SDOI2013]淘金 数位DP
    环状最大两段子段和
    [清华集训2014]奇数国
    [HNOI2003]激光炸弹
    [SCOI2010]字符串
    [SCOI2005]扫雷
  • 原文地址:https://www.cnblogs.com/derek1184405959/p/10993458.html
Copyright © 2011-2022 走看看