npm、nvm和gulp

npm、nvm和gulp

• 1.环境介绍
• 2.nvm和node.js环境配置
• 3.npm使用详解
• 4.gulp介绍和安装
• 5.gulp创建任务
• 6.gulp创建处理css文件任务
• 7.gulp给文件重命名
• 8.gulp处理JavaScript文件的任务
• 9.合并多个文件
• 10.创建压缩图片任务
• 11.监听文件修改，自动执行任务
• 12.修改代码实时刷新浏览器
• 13.项目环境搭建和安装相应包
• 14.编写gulpfile.js文件
• 15.sass语法介绍和转换为css

环境介绍

本项目具有前台和CMS后台管理系统。
具有以下模块:新闻、在线课程、付费资讯、搜索等模块。
其中涉及到的技术要点有:
Django 、ajax ，Restful API，arttemplate.js 、在线视频播放,支付，haystack 搜索，UEditor 富文本编辑器，第三方分享等。
其中包括前端页面布局，逻辑处理和后台逻辑代码。

以下讲解本项目中所用到的环境

前端方向:

1. nvm :用来管理node.js的工具。
2. node.js :自带有npm包管理工具。
3. npm :类似于Python 中的pip。可以非常方便的管理一些前端开发的包。
4. gulp :用来自动化开发流程。比如ssass 转css，css和js压缩等。

后端方向:

1. Python 3.6 :开发语言。
2. Django 2.0 :开发框架。
3. MySQL 5.7 :数据库。

nvm和node.js环境配置

# 更换镜像
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
nvm list
nvm install 6.4.0
nvm use 6.4.0
nvp -v  # =


npm install express -g  # 安装本地和全局的express模块 
npm install express

npm uninstall
npm search 
npm update 
npm install -g cnpm --registry=https://registry.npm.taobao.org  # 命令cnpm

# 强制更换npm版本
npm -g install npm@3.10.3

npm使用详解

安装包分为全局安装和本地安装。
全局安装是安装在当前node 环境中,在可以在cmd中当作命令使用。
本地安装是安装在当前项目中，只有当前这个项目能使用，并且可以通过require引用。
安装的方式只有-g 参数的区别:

npm install express #本地安装
npm install express -g # 全局安装

本地安装
1.将安装包放在./node_ modules 下(运行npm命令时所在的目录)，如果没有node. modules目录，会在当前执行npm 命令的目录下生成node. modules目录。
2.可以通过require() 来引入本地安装的包。

全局安装
1.将安装包放在/usr/1ocal 下或者你node的安装目录。
2.可以直接在命令行里使用。

卸载

npm uninstall xxx

更新、搜索

npm update 
npm search 

gulp介绍和安装

前端项目搭建
前端我们使用gulp来自动化开发流程。配置好gulp 后，可以自动给我们处理好一-些工作。比如写完css后，要压缩
成.min.css ,写完js后,做混淆和压缩，图片压缩等。这些工作都可以让gulp帮我们完成。

安装gulp:
1.创建本地包管理环境:
使用npm init命令在本地生成一个package.json 文件
package.json 是用来记录你当前这个项目依赖了哪些包，以后别人拿到你这个项目后，不需要你的node_ modules 文件夹(因为node. moduels中的包实在太庞大了)。只需要执行npm install命令，即会自动安装package.json 下devDependencies 中指定的依赖包。

2.安装gulp:
gulp 的安装非常简单，只要使用npm命令安装即可。但是因为gulp需要作为命令行的方式运行，因此需要在安装在系统级别的目录中。

npm install gulp -g

# 安装gulp


npm install gulp -g
npm init # 生成package.json
npm install gulp --save-dev       # 会将安装信息放入packange.json的devDepedency   --save-dev

gulp创建任务

要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个 gulpfile.js 文件。然后在gulpfile.js 中填入以下代码:

var gulp = require("gulp")
gulp.task("greet", function () {
      console.1og('hel1o world');
});

这里对代码进行解释:
1.通过require语句引用已经安装的第三方依赖包。这个require 只能是引用当前项目的，不能引用全局下的。require 语法
是node.js 独有的，只能在node.js 环境下使用。
2. gulp.task 是用来创建一一个任务。 gulp.task 的第一个参数是命令的名字，第二个参数是一个函数,就是执行这个命令的时候会做什么事情，都是写在这个里面的。
3.写完以上代码后，以后如果想要执行greet命令，那么只需要进入到项目所在的路径，然后终端使用gulp greet即可执行。

gulp创建处理css文件任务

gulp只是提供一一个框架给我们。如果我们想要实现一些更加复杂的功能，比如css压缩，那么我们还需要安装一下
gulp-cssnano插件。gulp 相关的插件安装也是通过npm命令安装，安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包)。
对css文件的处理,需要做的事情就是压缩，然后再将压缩后的文件放到指定目录下(不要和原来css文件重合了) !这里我们使用gulp-cssnano 来处理这个工作

npm install gulp-cssnano --save-dev

然后在gulpfile.js 中写入以下代码:

npm install gulp-cassnano --save-dev

var gulp = require("gulp")   # 相当于pip 引用的意思
var cssnano = require(" gulp-cssnano")
//定义一个处理css文件改动的任务
gulp.task("css", function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())        # pipe 管道 将上一次的结果传到下一级
    .pipe(gulp.dest("./css/dist/"))
});

以上对代码进行详细解释:

1. gulp.task :创建一个css处理的任务。
2. gulp.src :找到当前css 目录下所有以.css结尾的css文件。
3. pipe :管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano 。
4. gulp.dest :将处理完后的文件,放到指定的目录下。不要放在和原文件相同的目录,以免产生冲突,也不方便管理。

从而html页面的格式可以直接使用压缩过后的css文件

gulp给文件重命名

像以上任务，压缩完css文件后，最好是给他添加一一个.min.css 的后缀，这样一眼就能知道这 个是经过压缩后的文件。这时候我们就需要使用gulp-rename 来修改了。当然首先也需要安装

npm install gulp-rename --save-dev 

示例代码如下:

var gu1p = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gu1p- rename" )
gulp.task("css" ,function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp. dest("./css/dist/"))
});

在上述代码中，我们增加了一行.pipe(rename({“suffix”:" .min")) ,这个我们就是使用rename方法，并且传递一个对象参数，指定修改名字的规则为添加一一个.min 后缀名。这个gulp-rename 还有其他的指定文件名的方式，比如可以在文件名前加个前缀等。

gulp处理JavaScript文件的任务

处理js文件，我们需要使用到gulp-uglify 插件。安装命令如下:

npm install gulp-uglify --save-dev

安装完后，我们就可以对js文件进行处理了。示例代码如下:

var gulp = require("gulp")
var rename = require ("gulp-rename" )
var uglify = require('gulp-uglify');
gulp.task('script'，function(){
    gu1p.src(path.js + '*.js')
    .pipe(uglify({
       'toplevel':true,         # 简化所有顶级参数
       'compress':{             # 删除所有console打印
           'drop_console':true
         }      
     }
))
    .pipe(rename({suffix:'.min'})) 
    pipe(gulp.dest('js/')); !
});

这里就是增加了一个.pipe(uglify())的处理，对js文件进行压缩和丑化(修改变量名)等处理。更多关于gulp-uglify 的教程。
请看: https://github.com/mishoo/UglifyJS2#minify-options。

合并多个文件

在网页开发中，为了加快网页的渲染速度，有时候我们会将多个文件压缩成一一个文件， 从而减少请求的次数。要拼接文件,我们需要用到gulp-concat 插件。安装命令如下:

npm install gulp-concat --save-dev

比如我们现在有一个nav.js文件用来控制导航条的。有一个index.js 文件用来控制首页整体内容的。那么我们可以使用以下代码将这两个文件合并成一一个文件:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require(' gulp-uglify');
gulp.task('vendorjs' , function(){
    gulp.src([
    './js/nav.js',
    ' ./js/index.js '
    ])
    .pipe(concat( index.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

创建压缩图片任务

图片是限制网站加载速度的一个主要原因。图片越大,从网站上下载所花费的时间越长。因此对于一些图片，我们可以采取无损压缩，即在不改变图片质量的基础之上进行压缩。在gulp中我们可以通过gulp-imagemin来帮我们实现。安装命令如下:

npm install gulp-imagemin --save-dev

压缩图片也是一一个比较大的工作量，对于一些已经压缩过的图片,我们就没必要再重复压缩了。这时候我们可以使用gulp-cache 来缓存那些压缩过的图片。安装命令如下:

npm install gulp-cache --save-dev

两个插件结合使用的代码如下: .

var imagemin = require(' gulp- imagemin');
var cache = require('gulp-cache');
gulp.task("image', function(){
    gulp.src("./images/*.*")
    .pipe (cache(imagemin()))
    .pipe(gulp.dest('dist/images/'));
});

监听文件修改，自动执行任务

9.检测代码修改，自动刷新浏览器:
以上所有的任务,我们都是需要手动的在终端去执行。这样很不方便我们开发。最好的方式就是我修改了代码后，gulp 会自动的执行相应的任务。这个工作我们可以使用gulp内置的watch方法帮我们完成:

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

//定义一个处理css文件改动的任务
gulp.task("css", function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":". min"}))
    pipe(guIp. dest("./css/dist/"))
    pipe (connect.reload())
});
//定义一个监听的任务
gulp.task("watch", function () {
//监听所有的Css文件，然后执行css这个任务
    gulp.watch("./css/*.css",['css'])
});

以后只要在终端执行gulp watch命令即可自动监听所有的css 文件，然后自动执行css 的任务,完成相应的工作。

修改代码实时刷新浏览器

以上我们实现了更改一些css文件后，可以自动执行处理css的任务。但是我们还是需要手动的去刷新浏览器，才能看到修改后的效果。有什么办法能在修改完代码后，自动的刷新浏览器呢。答案是使用browser-sync 。browser-sync 安装的命令如下:

npm install browser-sync --save-dev

browser-sync使用的示例代码如下: .

var gu1p = require("gulp")
var cssnano = require("gulp-cssnano" )
var rename = require("gulp-rename" )
var bs = require("browser-sync").create()
gulp.task("bs" , function () {
     bs.init({
     'server': {
     'baseDir': './'
}
});

//定义一个处理Css文件改动的任务
gulp. task("css",function () {
    gu1p.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    .pipe(bs.stream())
});
//定义一个监听器的任务
gulp.task("watch",function(){
    gulp.watch("./css/*.css",['css'])
});

//执行gulp server开启服务器

gulp.task("server",['bs','watch'])

以上我们创建了一个bs的任务，这个任务会开启一个3000 端口,以后我们在访问html 页面的时候，就需要通
过http://127.0.0.1:3000 的方式来访问了。然后接下来我们还定义了一个server 任务。这个任务会去执行bs和watch 任务,只要修改了css 文件,那么就会执行css 的任务，然后就会自动刷新浏览器。
browser-sync更多的教程请参考: http://www.browsersync.cn/docs/gulp/。

项目环境搭建和安装相应包

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-cache": "^1.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-concat-folders": "^1.3.1",
    "gulp-connect": "^5.5.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^1.2.3",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8"
  }
}

where python
mkvirtualenv django-env
pip install django==2.0

编写gulpfile.js文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI</title>
    <link rel="stylesheet" href="../../dist/css/index.min.css">
</head>
<body>
    hello smj!
</body>
</html>

gulpfile.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 cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync').create();
//var sass = require("gulp-sass");
// gulp-util：这个插件中有一个方法log，可以打印出当前js错误的信息
//var util = require("gulp-util");
//var sourcemaps = require("gulp-sourcemaps");

var path={

    'html': './templates/**/',
    'css': './src/css/',
    'js': './src/js/',
    'images': './src/images/',
    'css_dist': './dist/css/',
    'js_dist': './dist/js/',
    'images_dist': './dist/images/'
}

// 处理html文件的任务
gulp.task("html",function () {
    gulp.src(path.html + '*.html')
        .pipe(bs.stream())
});

// 定义一个css的任务
gulp.task("css",function () {
    gulp.src(path.css + '*.css')
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
});

// 定义处理js文件的任务
gulp.task("js",function () {
    gulp.src(path.js + '*.js')
        //.pipe(sourcemaps.init())
        .pipe(uglify())
        //.pipe(rename({"suffix":".min"}))
       // .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
});

// 定义处理图片文件的任务
gulp.task('images',function () {
    gulp.src(path.images + '*.*')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())
});

// 定义监听文件修改的任务
gulp.task("watch",function () {
    gulp.watch(path.html + '*.html',['html']);
    gulp.watch(path.css + '*.css',['css']);
    gulp.watch(path.js + '*.js',['js']);
    gulp.watch(path.images + '*.*',['images']);
});

// 初始化browser-sync的任务
gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

// 创建一个默认的任务
gulp.task("default",['bs','watch']);

body{
    background: yellow;
}

浏览器访问：

http://localhost:3000/templates/news/index.html

sass语法介绍和转换为css

Sass语法:
众所周知,css不是门编程语言。他没法像js和python那样拥有逻辑处理的能力，甚至导入其他的css文件中的样式都做不到。而Sass就是为了解决css的这些问题。他它允许你使用变量、嵌套规则、mixins 、导入等众多功能，并且完全兼容css语法。Sass 文件不能直接被网页所识别，写完Sass后，还需要专门]的工具转化为Css才能使用。

Sass文件的后缀名:
Sass文件有两种后缀名，一个是scss ,一个是sass。
不同的后缀名,相应的语法也不一样。这里我们使用scss的后缀名。
包括后面讲到的sass语法，也都是scss 的后缀名的语法。
使用gulp将Sass 转换为css :
将Sass文件转换为css 文件的工具有很多。这里我们就使用之前讲过的gulp来实现。这里我们需要使用gulp-sass 插件来帮我们完成。安装方式非常简单:

npm install gulp-sass --save-dev 

那么处理sass的代码如下:

var gulp = require("gulp");
var sass = require("gulp-sass");
//处理css的任务
gulp.task('css',function () {
gulp.src(path.css + '*.scss' )
.pipe(sass().on("error", sass.logError))  // 如果有错，就打印
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest(path.css_dist))
});

Sass基本语法:
注释:
支持/* comment */和//注朴两种方式。

嵌套:
Sass语法允许嵌套。比如#main下有一一个类为.header ，那么我们可以写成以下的形式:

#main{
background: #CCC;
.header{
width: 20px;
height: 20px;
  }
 }

这样写起来更加的直观。一看就知道. header是在#main下的。

引用父选择器(&) :

有时候，在嵌套的子选择器中，需要使用父选择器，那么这时候可以通过&来表示。示例代码如下:

body{
    background: black;
}

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 cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync').create();
var sass = require("gulp-sass");
// gulp-util：这个插件中有一个方法log，可以打印出当前js错误的信息
//var util = require("gulp-util");
//var sourcemaps = require("gulp-sourcemaps");

var path={

    'html': './templates/**/',
    'css': './src/css/',
    'js': './src/js/',
    'images': './src/images/',
    'css_dist': './dist/css/',
    'js_dist': './dist/js/',
    'images_dist': './dist/images/'
}

// 处理html文件的任务
gulp.task("html",function () {
    gulp.src(path.html + '*.html')
        .pipe(bs.stream())
});

// 定义一个css的任务
gulp.task("css",function () {
    gulp.src(path.css + '*.scss')
        .pipe(sass().on("error",sass.logError))
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
});

// 定义处理js文件的任务
gulp.task("js",function () {
    gulp.src(path.js + '*.js')
        //.pipe(sourcemaps.init())
        .pipe(uglify())
        //.pipe(rename({"suffix":".min"}))
       // .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
});

// 定义处理图片文件的任务
gulp.task('images',function () {
    gulp.src(path.images + '*.*')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())
});

// 定义监听文件修改的任务
gulp.task("watch",function () {
    gulp.watch(path.html + '*.html',['html']);
    gulp.watch(path.css + '*.css',['css']);
    gulp.watch(path.js + '*.js',['js']);
    gulp.watch(path.images + '*.*',['images']);
});

// 初始化browser-sync的任务
gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

// 创建一个默认的任务
gulp.task("default",['bs','watch']);