為了UED前端團隊更好的協作開發同時提高項目編碼質量,我們需要將Web前端使用工程化方式構建;
創新互聯建站主營梅州網站建設的網絡公司,主營網站建設方案,成都app開發,梅州h5小程序制作搭建,梅州網站營銷推廣歡迎梅州等地區企業咨詢
目前需要一些簡單的功能:
1. 版本控制
2. 檢查JS
3. 圖片合并
4. 壓縮CSS
5. 壓縮JS
6. 編譯SASS
這些都是每個Web項目在構建、開發階段需要做的事情。前端自動化構建環境可以把這些重復工作一次配置,多次重復執行,極大的提高開發效率。
目前最知名的構建工具: Gulp、Grunt、NPM + Webpack;
grunt是前端工程化的先驅
gulp更自然基于流的方式連接任務
Webpack最年輕,擅長用于依賴管理,配置稍較復雜
推薦使用Gulp,Gulp基于nodejs中stream,效率更好語法更自然,不需要編寫復雜的配置文件
Use Gulp to automate front-end build tasks
Gulp是基于 Node.js的,需要要安裝 Node.js
1、為了確保依賴環境正確,我們先執行幾個簡單的命令檢查。
node -v
Node是一個基于Chrome JavaScript V8引擎建立的一個解釋器
檢測Node是否已經安裝,如果正確安裝的話你會看到所安裝的Node的版本號
2、接下來看看npm,它是 node 的包管理工具,可以利用它安裝 gulp 所需的包
npm -v
這同樣能得到npm的版本號,裝 Node 時已經自動安裝了npm
3、開始安裝Gulp
npm install -g gulp
全局安裝 gulp
gulp -v
得到gulp的版本號,確認安裝成功
基礎安裝結束
-
4、切換到你的在項目根文件夾下,運行
npm install gulp --save-dev
//將具體的gulp功能插件局部安裝項目下
5、安裝gulp功能插件依賴包
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev
gulp功能模塊的文件會放在項目所在的目錄的./node_modules 下
6、我們目前先使用一些簡單的功能:
- 檢查Javascript
- 編譯Sass文件
- 合并Javascript
- 壓縮合并并重命名Javascript
新建gulpfile.js 配置文件放在項目根目錄下
演示項目目錄結構
testProject (項目名稱) |–.git 通過git進行版本控制,項目自動生成這個文件 |–node_modules 組件包目錄 |–dist **發布環境**(編譯自動生成的) |–css 樣式文件(style.css style.min.css) |–images 圖片文件(壓縮圖片\合并后的圖片) |–js js文件(main.js main.min.js) |–index.html 靜態頁面文件(壓縮html) |–src **開發環境** |–sass sass文件 |–images 圖片文件 |–js js文件 |–index.html 靜態文件 |–gulpfile.js gulp配置文件 |–package.json 依賴模塊json文件,在項目目錄下npm install會安裝項目所有的依賴模塊,簡化項目的安裝程序
現在,項目文件夾都建好,組件也安裝完畢了,我們需要編寫gulpfile.js文件以指定gulp需要為我們完成什么任務。
gulpfile.js內容如下:
// 引入gulp var gulp = require('gulp'); // 引入組件 var jshint = require('gulp-jshint');//檢查js var sass = require('gulp-sass'); //編譯Sass var concat = require('gulp-concat');//合并 var uglify = require('gulp-uglify');//uglify 組件(用于壓縮 JS) var rename = require('gulp-rename');//重命名 // 檢查js腳本的任務 gulp.task('lint', function() { gulp.src('./js/*.js') //可配置你需要檢查腳本的具體名字。 .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 編譯Sass gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css'));//dest()寫入文件 }); // 合并,壓縮js文件 // 找到 js/ 目錄下的所有 js 文件,壓縮,重命名,最后將處理完成的js存放在 dist/js/ 目錄下 gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); console.log('gulp task is done');//自定義提醒信息 }); .... // 其他任務類似 // 定義默認任務,執行gulp會自動執行的任務 gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 監聽js文件變化,當文件發生變化后會自動執行任務 gulp.watch('./js/*.js', function(){ gulp.run('lint','scripts'); }); });
7、現在,回到命令行窗口,可以直接運行gulp任務了。
gulp
這將執行定義的default任務,就和以下的命令式同一個意思
gulp default
當然,我們可以運行在gulpfile.js中定義的任意任務,比如,現在單獨運行sass任務:
gulp sass
8、編譯會顯示Finished,如果你的JS有什么不好的地方它會提醒,避免一些不必要的錯誤,十分貼心
常見提醒:
1.禁止在同一行聲明多個變量。
2.請使用 ===/!==來比較true/false或者數值
3.使用對象字面量替代new Array這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不應該有時候有返回值,有時候沒有返回值。
7.For循環必須使用大括號
8.If語句必須使用大括號
9.for-in循環中的變量 應該使用var關鍵字明確限定作用域,從而避免作用域污染。
9、gulp的插件數量很多,后面還可以根據自己的需要進行添加任務
常用的gulp插件參考
gulp-imagemin: 壓縮圖片
gulp-ruby-sass: 支持sass,安裝此版本需要安裝ruby
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 壓縮html
gulp-clean: 清空文件夾
gulp-livereload: 服務器控制客戶端同步刷新(需配合chrome插件LiveReload及tiny-lr)
Use Git as a project management tool
安裝git, 下載安裝包會安裝好 Git Shell 和可視化環境
http://git-scm.com/download/win
配置用戶名:
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
關聯一個到團隊的庫
git remote add origin git@github.com:markyun/My-blog.git
添加文件到倉庫,添加全部文件用 . 表示
git add .
把文件提交到倉庫
git commit -m " first add project file"
提交文件到團隊倉庫
git push -u origin master //將本地的項目提交到遠程倉庫中。
以上就完成了前端團隊最基本的開發環境搭建和代碼提交工作流程。
補充:ZSmart UED Team 的前端開發軟件環境 (Windows, Linux, Mac OS X)
安裝Node.Js、NPM、Ruby、Java 基礎環境
Sublime Text3 + 插件 用于編寫前端代碼
Google chrome 、Mozilla Firefox + Firebug
Internet Explorer 進行兼容測試和預覽頁面UI、動畫效果和交互功能
Node.js+Gulp 進行前端自動化構建、JS語法驗證、CSS壓縮,圖片壓縮等;
Koala 實時編譯Less、Sass、Compass、CoffeeScript;
Github 存儲自己的代碼庫 、git或SVN用于版本控制和團隊Code Review
Tomcat、DedeAMPZ、MAMP 進行簡單運行環境演示
Photoshop CC 切圖 + Sprites 合并小圖標
XMind 畫出清晰的工作或業務邏輯思維圖
(未完待續...)
當前標題:nodejs前端自動化構建環境的搭建
網址分享:http://m.newbst.com/article38/pogesp.html
成都網站建設公司_創新互聯,為您提供做網站、域名注冊、App開發、移動網站建設、網站設計公司、用戶體驗
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯