前端自动化工作流环境

Posted 海盗屋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端自动化工作流环境相关的知识,希望对你有一定的参考价值。

可以避免重复操作
前端开发的编译操作
 
一.Node环境
Node.js 不是一个js文件,也不是一个JS框架。
而是 Server side javascript runtime 服务器端javascript运行时
 
nodeJS分支
io.js 社区的产物 15年又合并了 后来又拆开了
Node 4.x == 官方的
node 5.x == io.js
 
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 包管理)
因为第三方的包非常之多,所以要有一个这样的包管理工具 可用来安装、卸载、更新包 类似nuget
场景:需要一个包A,A依赖B,B依赖C 包之间的引用非常多 这时npm会自动检测依赖 全部拿下来
 
安装包:打开终端->npm install {packge_name}
移除:npm uninstall packge_name
 
5.bower
前端包管理工具 可以安装bootstrap jquery icons select2等前端包 没什么用 可以看看都有什么
 
6.Gulp 
自动化工具,将重复工作抽象成多个任务
css压缩、js压缩、html压缩、图片尺寸优化
如果慢用国内的 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也发生改变
 
插件:
 
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:浏览器同步
安装 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则不会 ,一样的东西。
 
 
 
 
 

以上是关于前端自动化工作流环境的主要内容,如果未能解决你的问题,请参考以下文章

Gulp构建前端自动化工作流

浅谈构建前端自动化工作流程一 之 node

前端架构之工作流

如何使用Grunt打造前端自动化工作流

前端笔试题之什么是gulp

前端Vue+后端Django项目创建以及自动部署流程