大企業の公式ウェブサイトを構築するためのジャンゴ（II）

第三に、プロジェクトのビルド環境

3.1。プロジェクト環境とインストールパッケージを作成します

Djangoプロジェクトを作成します。

mkvirtualenv DjangoProject 

workon DjangoProject 

ピップインストール -i https://pypi.douban.com/simpleジャンゴ== 2.0.2

前のディレクトリに

初期化NPMの     ＃は、設定ファイルpackage.jsonを初期化します

package.jsonファイルで、インストールするパッケージを追加します。

" devDependencies " ：{
     " ブラウザ同期"：" ^ 2.26.7 " 、
     " がぶ飲み"：" ^ 4.0.2 " 、
     " 飲み込むキャッシュを"：" ^ 1.1.2 " 、
     " 飲み込む化連結を"：" ^ 2.6.1 " " がぶ飲み-cssnano "：" ^ 2.1.3 " " 飲み込む-imageminを」：" ^ 6.0.0 "、
     " -名前の変更を飲み込む"：" ^ 1.4.0 " 、
     " 同期を飲み込む"：" ^ 0.1.4 " 、
     " 飲み込む-tinypng-NOKEY "：" ^ 1.1.0 " 、
     " 飲み込む-uglify "：" ^ 3.0.2 " " がぶ飲みウォッチ"：" ^ 5.0.1 " 
  }

{
   " 名前"：" xfz_front " 、
   " バージョン"：" 1.0.0 " 、
   " 説明"：" XFTフロントコード" 、
   " 主"：" index.js " 、
   " スクリプト" ：{
     " テスト"：" エコー\ "エラー：なしテストは\を指定していない" && 1番出口" 
  }、
  "著者「：」zhang_derek " " ライセンス"：" ISC " " devDependencies " ：{
     " ブラウザ同期"：" ^ 2.26.7 " " がぶ飲み"：" ^ 4.0.2 " " キャッシュを飲み込む"：" ^ 1.1。 2 " " 飲み込む化連結を"：" ^ 2.6.1 " "-cssnanoを飲み込みます」：" ^ 2.1.3 " 、
     " 飲み込む-imageminを"：" ^ 6.0.0 " 、
     " 飲み込む-名前の変更]を"：" ^ 1.4.0 " 、
     " 飲み込む同期を"：" ^ 0.1.4 " 、
     " 飲み込む-tinypngを-nokey "：" ^ 1.1.0 " " 飲み込む-uglify "：" ^ 3.0.2 " " 飲み込む-時計を」：" ^ 5.0.1 "
  } 
}

コードの表示

インストールパッケージは、パッケージが自動的にファイルに必要なpackage.jsonを識別します

NPMインストール

プロジェクトのディレクトリ構造

 

3.2。ライティングgulpfile.jsファイル

gulp.js

VaRの一気は=（「がぶ飲み」が必要）。
VaRの cssnanoは=（ "飲み込む-cssnano"が必要）。
VaRの名前変更は=（「飲み込む-名前の変更」が必要です）。
VaRの uglify =（ "飲み込む-uglify"が必要です）。
VaRの CONCATは=（ "飲み込む化連結"が必要）。
VaRの tinypng_nokeyは=（ 'ゴクゴク-tinypng-NOKEY'を必要）。
VARの =は（ "ブラウザ同期"を必要とBS ）.create（）; 

// HTML任务 
gulp.task（ "HTML"、行わ=> { 
    gulp.src（ "./templates/**/*.html" ）
    .pipe（bs.reload（{ 
        ストリーム：真
    }））。
    （）で行わ; 
}）;


// CSSタスク 
gulp.task（ "CSS" => DONE { 
    gulp.src（ "./src/css/*.css" ）
    .pipe（cssnano（））    // 圧縮 
    （{「サフィックスをリネーム（.pipeを"："分「}））   // サフィックス名 
    .pipe（gulp.dest（ './ DIST / CSS /'））    // 圧縮されたストレージ・パス
    .pipe（bs.reload（{ 
        ストリーム：真へ
    } ））; 
    ）（DONE; 
}）; 

// JSタスク 
gulp.task（ "JS"、DONE => { 
    gulp.src（ "./src/js/*.js" ）
    .pipe（uglify（{
        「トップレベル「：trueに、
        」圧縮：{
            'drop_console'：真
        } 
    }））
    .pipe（（{リネーム "サフィックス"： "分" }））
    .pipe（gulp.dest（ './dist/js/' ））
    .pipe（bs.reload（ { 
        ストリーム：真
    }））。
    （）で行わ; 
}）; 

// 画像任务 
gulp.task（ "画像"、行わ=> { 
    gulp.src（ "./src/images/*.*" ）
    .pipe（tinypng_nokey（））
    .pipe（gulp.dest（」./dist /画像/」））
    .pipe（bs.reload（{ 
        ストリーム：真
    }））; 
    （）行わ; 
}）;


gulp.task（ '自動'、関数（）{ 
    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/画像/*.*」、gulp.series（ '画像' ））; 
}）; 

// 初始化 
gulp.task（ "BS"、関数（）{ 
    bs.init（{
         'サーバ' {
             'BASEDIR'： './' 、
        } 
    }）
}）。

3.3.cssはSASSを変更しました

Sassのインストールパッケージ

NPMインストール一息-SASS --save-devの

index.scssにindex.cssファイル

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