可以避免重复操作
前端开发的编译操作
一.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"]);
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
files: "**",
server: {
baseDir: "./"
}
});
});
gulp.task('default', ["browser-sync"]);
8.grunt 在运行的时候会产生很多临时文件，gulp则不会 ，一样的东西。