Django打造大型企業官網（二）

3、項目環境搭建

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