构建前端自动化工作流环境

 2017年2月25日 12:30   Nick王   开发    1 评论   331 浏览 


AA

1. node.js版本管理工具nvm(node.js version manage)


nvm是的node.js的版本管理工具(多个node.js版本共存),有点类似Python的virtualenv工具。

MacOS版本:https://github.com/creationix/nvm

windows版本:https://github.com/coreybutler/nvm-windows


mac安装不要使用brew,使用官方文档的curl的方法。


Windows推荐使用Windows 10。


以下是windows安装的过程。

安装完成,在命令行输入nvm,会有如下的显示

$ nvm
Running version 1.1.1.
Usage:
nvm arch                     : Show if node is running in 32 or 64 bit mode.
nvm install <version> [arch] : The version can be a node.js version or "latest" for the latest stable version.
Optionally specify whether to install the 32 or 64 bit version (defaults to system arch).
Set [arch] to "all" to install 32 AND 64 bit versions.
nvm list [available]         : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls.
nvm on                       : Enable node.js version management.
nvm off                      : Disable node.js version management.
nvm proxy [url]              : Set a proxy to use for downloads. Leave [url] blank to see the current proxy.
Set [url] to "none" to remove the proxy.
nvm node_mirror [url]        : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url.
nvm npm_mirror [url]         : Set the npm mirror. Defaults to https://github.com/npm/npm/archive/. Leave [url] blank to default url.
nvm uninstall <version>      : The version must be a specific version.
nvm use [version] [arch]     : Switch to use the specified version. Optionally specify 32/64bit architecture.
nvm use <arch> will continue using the selected version, but switch to 32/64 bit mode.
nvm root [path]              : Set the directory where nvm should store different versions of node.js.
If <path> is not set, the current root will be displayed.
nvm version                  : Displays the current running version of nvm for Windows. Aliased as v.

修改nvm下载的nodejs的存储路径(在windows中设置的路径是nvm安装的路径),也就是说用nvm管理的node.js保存在什么地方

$ nvm root C:\Users\你的用户名\AppData\Roaming\nvm  #路径根据自己的电脑的真实环境


安装nodejs

$ nvm install 6.9.4


查看当前所有的nodejs的版本

$ nvm list

7.4.0
* 6.9.4 (Currently using 64-bit executable)


切换到指定版本的nodejs

$ nvm use 6.9.4
Now using node v6.9.4 (64-bit)


查看node版本,并使用

$ node -v
v6.9.4

$ npm -v
3.10.10

$ node  #进入node交互界面
> console.log("hello world!")
hello world!
undefined
> .exit


2. 使用npm工具


npm(node package manager)是随同NodeJS一起安装的包管理工具,类似于Python中的pip工具。


npm可以用来从NPM服务器下载别人编写的第三方包到本地使用,也可以将自己编写的包上传到NPM服务器供别人使用。


npm配置使用详解:http://www.cnblogs.com/libin-1/p/5907175.html


首先切换到项目的根目录,然后生成项目的配置文件

$ npm init --yes

解释:使用--yes参数在项目根目录生成默认的配置文件,也可以不写--yes,交互式生成配置文件。在项目根目录下会生成配置文件,名字是package.json


在项目根目录下安装所需要的包

$ npm install bootstrap

npm install命令也有一个可选的参数,是--save ;

当使用npm install bootstrap --save 的时候会在项目根目录配置文件package.json配置文件中标明该项目是依赖(配置文件中的dependencies选项)bootstrap的。比如:

{
    "name": "dev",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {   #看这里 , 这里标明的就是项目所依赖的包
        "bootstrap": "^3.3.7"
    }
}

当使用install安装包的时候,npm会在项目的根目录生成一个node_modules的目录,所有安装的包都会在这个目录中。注意这个目录是自动生成的。


安装项目的依赖包

$ npm install

当该命令执行,并没有明确指定安装任何包,npm会根据在项目根目录配置文件package.json中的依赖关系,自动安装所需要的包。这样,项目进行迁移的时候就不用额外的拷贝node_modules目录了。


生成开发需要的依赖包,使用--save生成的是生产环境的依赖关系,如果要生成开发环境的依赖关系,可以使用--save-dev

$ npm install bootstrap --save-dev

对应的配置文件如下:
{
    ……省略……
    "author": "",
    "license": "ISC",
    "devDependencies": { # 注意,这里是devDependencies,表示开发依赖包
        "bootstrap": "^3.3.7"
    }
}


命令总结:

npm init  #初始化项目, 交互式的生成package.json配置文件
npm init --yes  #非交互式自动生成package.json配置文件
npm install   #根据package.json自动安装依赖的包
npm install 包名   #指定包的名称进行安装
npm install 包名 --save  #安装指定的包,并生成依赖
npm install 包名 --save-dev   #安装指定的包,并生成开发环境的依赖


详细的文档见:https://docs.npmjs.com/getting-started/using-a-package.json

好文推荐:http://www.infoq.com/cn/articles/msh-using-npm-manage-node.js-dependence


3. 使用bower工具


事实上bower也是包管理工具。不过bower的安装和升级都是依赖于npm的。


他俩有个很大的区别,npm主要用于nodejs项目内部依赖包的管理,安装的模块全部都在项目根目录下的node_modules目录内。


bower主要用于纯粹的前端开发,可以对css/js模板等内容进行依赖管理,下载目录可以随便自定义。


所以一般npm主要用于nodejs的后端开发,bower作用于前端的组合使用模式。


注意: bower工具依赖git


使用npm安装bower到全局路径(-g 选项,如果不使用-g参数会安装在当前目录/也就是当前项目)

$ npm install -g bower

$ bower -v
1.8.0


官方链接:https://bower.io/#install-bower

关于全局安装:http://blog.csdn.net/pzlsun/article/details/45842499

关于npmrc:http://www.tuicool.com/articles/mEFZzeR

npm配置使用详解:http://www.cnblogs.com/libin-1/p/5907175.html


可以在当前家目录下配置.npmrc配置来规定npm包安装的位置。


使用bower安装包(基本上和npm的用法是一样的,包括--save和--save-dev)

$ bower install bootstrap

关于.bowerrc配置(配置代理,以及安装位置):https://github.com/bower/spec/blob/master/config.md


如果需要配置依赖关系等,需要先在项目根目录初始化,生成配置文件bower.json

$ bower init


4. 使用gulp自动化流构建工具


gulp主要的工作就是帮我们自动的完成一些重复的任务。

gulp的机制是将重复的工作抽象成一个个的任务。

推荐链接:http://www.tuicool.com/articles/FJVNZf

官方链接:http://www.gulpjs.com.cn/docs/getting-started/


因为gulp既包含工具,也包含一些自动化任务的API。所以我们要在全局环境安装一次gulp,还要在本地项目中安装一次gulp。


全局安装gulp

$ npm install -g gulp

$ gulp -v
[17:35:27] CLI version 3.9.1

切换到我们的项目根目录,再次安装一次gulp(我们只在开发阶段才会用到gulp)

$ npm init --yes  #一定要先生成配置文件
$ npm install gulp --save-dev

在项目的根目录下创建gulp主文件(gulpfile.js文件),该主文件用于注册任务

注意:在gulpfile.js中的代码都是nodejs的代码

文件内容如下:

/*
* gulpfile.js文件
*/
var gulp = require('gulp'); //导入gulp的模块,nodejs语法

gulp.task('firstTask', function() { //注册一个任务,任务名为firstTask,当gulp执行firstTask任务时会自动执行函数内容
    console.log("this is firstTask");
});

执行任务(确保gulp已经安装在全局变量,gulp命令可用)

$ gulp firstTask  #注意 ,这里是要执行的任务的名称
[17:55:55] Using gulpfile E:\dev\gulpfil
[17:55:55] Starting 'firstTask'...
this is firstTask
[17:55:55] Finished 'firstTask' after 11


5. 使用gulp编写一个文件拷贝的任务


在实际的开发过程中,我们的源码可能在src目录中,开发结束后可能会将src目录中的文件拷贝到dist目录中,用于生产环境。


现在就使用gulp来编排这样一个简单的任务。


首先在我们的项目根目录中规划项目结构,结构如下:

$ tree
文件夹 PATH 列表
卷序列号为 0000009A CEA3:E6CC
E:.
├─dist
├─node_modules
└─src
└─index.html


修改gulp的主文件(gulpfile.js)内容如下:

/*
* gulpfile.js文件
*/
var gulp = require('gulp'); //导入gulp的模块,nodejs语法

gulp.task('firstTask', function() { //注册一个任务,任务名为firstTask,当gulp执行firstTask任务时会自动执行函数内容
    console.log("this is firstTask");
});

gulp.task('copy', function () { //注册一个任务,任务名为product
    gulp.src('src/index.html')  //这里不能写分号,因为下一行是一个链式操作 $('#id').parent().parent();
        .pipe(gulp.dest('dist/')); //pipe管道,src是获取,dest为写入;引号中支持通配符
});

执行任务

$ gulp copy  #只执行copy任务
[18:23:25] Using gulpfile E:\dev\gulpfile.
[18:23:25] Starting 'copy'...
[18:23:25] Finished 'copy' after 9.37 m


6. 使用gulp构建一个自动化的文件拷贝任务


在上面的例子中,虽然文件拷贝任务可以完成,但是需要每次手动执行任务,要做到自动化的任务执行,还需要稍加修改。


gulp主文件内容如下:

/*
* gulpfile.js文件
*/
var gulp = require('gulp'); //导入gulp的模块,nodejs语法

gulp.task('firstTask', function() { //注册一个任务,任务名为firstTask,当gulp执行firstTask任务时会自动执行函数内容
    console.log("this is firstTask");
});

gulp.task('copy', function () { //注册一个任务,任务名为copy
    gulp.src('src/index.html')  //这里不能写分号,因为下一行是一个链式操作 $('#id').parent().parent();
        .pipe(gulp.dest('dist/')); //pipe管道,src是获取,dest为写入
});

gulp.task('dist', function () {
    gulp.watch('src/index.html', ['copy']); //第一个参数是通配符,表示要监视的文件;第二个参数表示要执行的任务
});

执行任务

$ gulp dist
[18:35:48] Using gulpfile E:\dev\gul
[18:35:48] Starting 'dist'...
[18:35:48] Finished 'dist' after 10
[18:37:54] Starting 'copy'...
[18:37:54] Finished 'copy' after 24
[18:37:57] Starting 'copy'...
[18:37:57] Finished 'copy' after 4.5


现在,开始体验这个神奇的功能把。


7. gulp的插件——less编译


gulp核心就提供了四个API,功能有限,如果想要完成复杂的任务,需要额外安装插件。


安装gulp-less插件,用来将less编译成css

$ npm install gulp-less --save-dev  #一定要在项目中根目录下执行

用法介绍:https://www.npmjs.com/package/gulp-less#basic-usage


首先准备一个less文件, 在项目下创建src/style/demo.less , 内容如下:

@primary-color: red;

body {
    background-color: @primary-color;
    
    .container {
        
        width: 1280px;
        
        .row {
            padding: 5px;
        }
    }
}

编写gulp主文件,内容如下:

/*
* gulpfile.js文件
*/
var gulp = require('gulp'); //导入gulp的模块,nodejs语法

var less = require('gulp-less'); //导入gulp-less模块

gulp.task('firstTask', function() { //注册一个任务,任务名为firstTask,当gulp执行firstTask任务时会自动执行函数内容
    console.log("this is firstTask");
});

gulp.task('copy', function () { //注册一个任务,任务名为copy
    gulp.src('src/index.html')  //这里不能写分号,因为下一行是一个链式操作 $('#id').parent().parent();
        .pipe(gulp.dest('dist/')); //pipe管道,src是获取,dest为写入
});

gulp.task('dist', function () {
    gulp.watch('src/index.html', ['copy']); //第一个参数是通配符,表示要监视的文件;第二个参数表示要执行的任务
    gulp.watch('src/style/*.less', ['style']); //less编译
});

gulp.task('style', function () {
    gulp.src('src/style/*.less')
        .pipe(less())  //这里是将less编译成css
        .pipe(gulp.dest('dist/css/')); //这里的文件名不要写,他会自动生成
});

运行任务

$ gulp dist
[18:59:56] Using gulpfile E:\dev\gu
[18:59:56] Starting 'dist'...
[18:59:56] Finished 'dist' after 16
[19:00:35] Starting 'style'...
[19:00:35] Finished 'style' after 2
[19:00:35] Starting 'style'...
[19:00:35] Finished 'style' after 6
[19:00:50] Starting 'style'...
[19:00:50] Finished 'style' after 1

现在less文件已经可以自动编译,并且拷贝到dist目录中去了。


8. gulp的插件——css压缩gulp-cssnano

官方链接地址:https://www.npmjs.com/package/gulp-cssnano


切换到项目根目录,安装gulp-cssnano

npm install gulp-cssnano --save-dev

编写gulp主文件,gulpfile.js文件如下

/*
* gulpfile.js文件
*/
var gulp = require('gulp'); //导入gulp的模块,nodejs语法

var less = require('gulp-less'); //导入gulp-less模块

var cssnano = require('gulp-cssnano');  //导入gulp-cssnano模块

gulp.task('firstTask', function() { //注册一个任务,任务名为firstTask,当gulp执行firstTask任务时会自动执行函数内容
    console.log("this is firstTask");
});

gulp.task('copy', function () { //注册一个任务,任务名为copy
    gulp.src('src/index.html')  //这里不能写分号,因为下一行是一个链式操作 $('#id').parent().parent();
        .pipe(gulp.dest('dist/')); //pipe管道,src是获取,dest为写入
});

gulp.task('dist', function () {
    gulp.watch('src/index.html', ['copy']); //第一个参数是通配符,表示要监视的文件;第二个参数表示要执行的任务
    gulp.watch('src/style/*.less', ['style']); //less编译
});

gulp.task('style', function () {
    gulp.src('src/style/*.less')
        .pipe(less())
        .pipe(cssnano()) //这里就是css压缩
        .pipe(gulp.dest('dist/css/')); //这里的文件名不要写,他会自动生成
});

运行任务

$ gulp dist


9. 其他常用的gulp插件


代码合并

官方链接:https://www.npmjs.com/package/gulp-concat

创建本地服务器:gulp-connect

官方链接:https://www.npmjs.com/package/gulp-connect

最小化js文件:gulp-uglify

官方链接:https://www.npmjs.com/package/gulp-uglify

重命名文件:gulp-rename

官方链接:https://www.npmjs.com/package/gulp-rename

压缩html文件:gulp-htmlmin

github链接:https://github.com/jonschlinkert/gulp-htmlmin

官方链接:https://www.npmjs.com/package/gulp-htmlmin

最小化图像:gulp-imagemin

官方链接:https://www.npmjs.com/package/gulp-imagemin

浏览器同步插件带本地服务器自带后台:browser-sync

github链接:https://github.com/BrowserSync/browser-sync




如无特殊说明,文章均为本站原创,转载请注明出处