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

A, nvm installation

(1) Download: nvm1.16

Add environmental variables (2) installation

         C:\Users\Administrator\AppData\Roaming\nvm

(3) modified settings.txt, npm mirror to the mirror Taobao

Find settings.txt file in the directory you installed, open plus 
node_mirror: HTTPS: //npm.taobao.org/mirrors/node/  
npm_mirror: HTTPS: //npm.taobao.org/mirrors/npm/

(4) Installation node

NVM install node 6.4 .0 

NVM list   

NVM use 6.4.0

Two, gulp installation and usage

 1. Install

npm init generates a package.json 

NPM the install GULP - G Global 

NPM the install GULP --save local-dev

 2. Create a gulp task

Gulpfile.js created in the root directory of the project, which follows the code

var gulp = require("gulp");

gulp.task("greet",done => {
    console.log('hello world');
    done();
});

Input terminal command to perform tasks: gulp greet

 3. Create css file processing task

The main css file for file compression, and then compressed into a specified directory

Install plug

npm install cssnano --save-dev

gulpfile.js Code

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

gulp.task("greet",done => {
    console.log('hello world');
    done();
});

gulp.task("css",done =>{
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./dest/css/"))
    done();
})

 4. Modify the file name

Install plug

npm install gulp-rename --save-dev

gulpfile.js

var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")

gulp.task("css",done =>{
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dest/css/"))
    done();
})

 5. Create a task processing js file

Install plug

npm install gulp-uglify --save-dev

gulpfile.js

var uglify = require("gulp-uglify")

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

 6. Merge multiple files

Install plug

npm install gulp-concat --save-dev

gulpfile.js

var uglify = require("gulp-uglify")
var concat = require("gulp-concat")

gulp.task("js",done =>{
    gulp.src("./js/*.js")
    .pipe(concat("index.js"))  //拼接成一个文件
    .pipe(uglify({
        'toplevel':true,
        'compress':{
            'drop_console':true
        }
    }))
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dest/js/"))
    done();
})

 7. Compress Pictures

Install plug

npm install gulp-tinypng-nokey -–save-dev

gulpfile.js

var tinypng_nokey = require('gulp-tinypng-nokey')

gulp.task("images",done =>{
    gulp.src("./images/*.*")
    .pipe(tinypng_nokey())
    .pipe(gulp.dest("./dest/images/"))
    done();
});

Command terminal; gulp images

 8.watch detection code, AutoSave

gulp.task('auto',function () {
    gulp.watch('./css/*.css',  gulp.series('css'));
})

After modifying the code, automatic execution of tasks

 9. Change the file auto-refresh browser

Install plug

npm install browser-sync -–save-dev

gulpfile.js

var bs = require("browser-sync").create();

gulp.task("css",done =>{
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dest/css/"))
    .pipe(bs.reload({
        stream: true
    }))
    done();
});

gulp.task('auto',function () {
    gulp.watch('./css/*.css',  gulp.series('css'));
});


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


gulp.task("server",gulp.parallel('bs','auto'));

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


gulp.task("greet",done => {
    console.log('hello world');
    done();
});

gulp.task("css",done =>{
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dest/css/"))
    .pipe(bs.reload({
        stream: true
    }))
    done();
});


gulp.task("js",done =>{
    gulp.src("./js/*.js")
    .pipe(concat("index.js"))  //拼接成一个文件
    .pipe(uglify({
        'toplevel':true,
        'compress':{
            'drop_console':true
        }
    }))
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dest/js/"))
    done();
});

gulp.task("images",done =>{
    gulp.src("./images/*.*")
    .pipe(tinypng_nokey())
    .pipe(gulp.dest("./dest/images/"))
    done();
});

gulp.task('auto',function () {
    gulp.watch('./css/*.css',  gulp.series('css'));
});


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


gulp.task("server",gulp.parallel('bs','auto'));

gulpfile.js

Modify the code auto-refresh browser