前端自動化工做流環境

能夠避免重複操做

前端開發的編譯操做

 

一.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則不會 ，同樣的東西。