前端自动化工作流环境

可以避免重复操作

前端开发的编译操作

 

一.Node环境

Node.js 不是一个js文件，也不是一个JS框架。

而是 Server side Javascript runtime 服务器端javascript运行时

 

nodeJS分支

io.js 社区的产物 15年又合并了 后来又拆开了

Node 4.x == 官方的

node 5.x == io.js

 

http://nodejs.cn

1.直接安装：

Mac

    官网下载 下一步完成 终端 node -v npm -v

windows

    官网下载 下一步完成 cmd path 看环境变量 node -v npm -v

 

2.NVM 安装：

Nvm node版本管理工具 node version manager

可以快速切换node.js版本

 

环境变量

 操作系统提供的系统级别存储的变量

 系统变量：所有当前系统用户共享的变量

 用户变量：当前用户的变量，不区分大小写，变量可以嵌套 %temp% = %abc%jsdkfls

 PATH变量：路径的引用，只要添加到PATH变量中 就可以再任何目录下搜索

 

3.Node用途

 3.1 开发web应用程序 动态网站 开发提供数据的服务端API

 3.2 前端开发工具基础 主要用这个实现自动化

 

在终端中 输入node 可以进入REPL环境（控制台环境） 可以执行js代码

 

node webserver demo

终端 cd 进入js目录 node js名 执行服务器监听8080端口

 

'use strict' //启用严格模式

 

//创建一个http服务器

var http = require('http');

 

//创建一个服务

 

var server = http.createServer(function(request,response){

    //处理请求和响应     

    response.writeHead(200,{

        'Content-Type':'text/html',

        'key1':'val1'

    });

    response.write('<h1>write</h1>');

    response.end();

});

 

//启动服务

server.listen(8080,function(error){

    console.log("listen 8080");

});

 

4.NPM Node Packge Manager （node 包管理）

https://www.npmjs.com

因为第三方的包非常之多，所以要有一个这样的包管理工具 可用来安装、卸载、更新包 类似nuget

场景：需要一个包A，A依赖B，B依赖C 包之间的引用非常多 这时npm会自动检测依赖 全部拿下来

 

安装包：打开终端->npm install {packge_name}

移除：npm uninstall packge_name

 

5.bower

前端包管理工具 可以安装bootstrap jquery icons select2等前端包 没什么用 可以看看都有什么

https://bower.io

 

6.Gulp 

自动化工具,将重复工作抽象成多个任务

css压缩、js压缩、html压缩、图片尺寸优化

http://www.gulpjs.com.cn

如果慢用国内的 npm.taobao.org

名字不要重名 

1.在当前文件夹下 npm init 全部默认就行 创建个package.json

2.npm install gulp —save-dev  //安装到项目

3.安装成功后 在项目根目录中创建文件 gulpfile.js

4.var gulp = require('gulp');gulp.task('default', function() {  // 将你的默认的任务代码放在这  console.log("hi gulp!");});

gulp API：

 1.gulp.src('src/index.html')  .pipe(gulp.dest('dist/')) //复制到此处

 2.gulp.task('default', function() {}); //定义一个任务

 3.gulp.watch('src/index.html',['copy']);  //监听

 

简单自动化：

var gulp = require('gulp');gulp.task('copy', function() {  gulp.src('src/index.html')  .pipe(gulp.dest('dist/')) //复制到此处});gulp.task('dist',function(){    gulp.watch('src/index.html',['copy']);})

 

当修改src/index.html 时 dist也发生改变

 

插件：

https://gulpjs.com/plugins/

 

gulp-less: 编译less为 css文件

gulp.task('less',function(){    gulp.src('src/style/*.less')    .pipe(less())    .pipe(gulp.dest('dist/css/'));});gulp.task('lesswatch',function(){    gulp.watch('src/style/*.less',['less']);});

 

Gulp-concat: 合并文件

Gulp-uglify :最小化js

Gulp-rename:重命名文件

Gulp-cssnano:最小化css文件

Gulp-minify-html:最小化html

Gulp-imagemin:最小化图像

 

Browsersync:浏览器同步

http://www.browsersync.cn/

安装 npm install -g browser-sync

检查 browser-sync --version

执行 browser-sync start --server --files "**” 检测该目录下所有的文件改动

代理模式 比如.net中的 localhost:6321

browser-sync start --proxy “localhost:6321" --files "**”

 

如果是host配置的域名则不可以 需要配置

  域名 端口 等 见API：

browserSyncAPI：

var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default', ["browser-sync"]);

 

 

8.grunt 在运行的时候会产生很多临时文件，gulp则不会 ，一样的东西。