Django打造大型企业官网（一） 一、nvm的安装二、gulp的安装和用法
Django打造大型企业官网（一） 一、nvm的安装二、gulp的安装和用法
zhang_derek
发布于 2019-06-14 10:18:29
发布于 2019-06-14 10:18:29
文章被收录于专栏：有趣的django
一、nvm的安装
（1）下载：nvm1.16
（2）安装完成后添加环境变量
C:\Users\Administrator\AppData\Roaming\nvm
（3）修改settings.txt，将npm镜像改为淘宝的镜像
在你安装的目录下找到settings.txt文件，打开后加上
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/（4）安装node
nvm install node 6.4.0
nvm list
nvm use 6.4.0二、gulp的安装和用法
1.安装
npm init 生成一个package.json
npm install gulp -g 全局
npm install gulp --save-dev 本地2.创建gulp任务
在项目根目录创建 gulpfile.js，里面代码如下
var gulp = require("gulp");
gulp.task("greet",done => {
console.log('hello world');
done();
});终端输入命令执行任务：gulp greet
3.创建css处理文件任务
主要对css文件进行压缩，然后再将压缩的文件放到指定目录
安装插件
npm install cssnano --save-devgulpfile.js代码
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.修改文件名
安装插件
npm install gulp-rename --save-devgulpfile.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.创建处理js文件的任务
安装插件
npm install gulp-uglify --save-devgulpfile.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("./dest/js/"))
done();
})6.合并多个文件
安装插件
npm install gulp-concat --save-devgulpfile.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.压缩图片
安装插件
npm install gulp-tinypng-nokey -–save-devgulpfile.js
var tinypng_nokey = require('gulp-tinypng-nokey')
gulp.task("images",done =>{
gulp.src("./images/*.*")
.pipe(tinypng_nokey())
.pipe(gulp.dest("./dest/images/"))
done();
});终端命令;gulp images
8.watch检测代码，自动保存
gulp.task('auto',function () {
gulp.watch('./css/*.css', gulp.series('css'));
})修改代码后，自动执行相应的任务
9.更改文件自动刷新浏览器
安装插件
npm install browser-sync -–save-devgulpfile.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'));修改完代码自动刷新浏览器
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-06-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
