#uglify

[icandy-official]

For some reason I feel like I’m riding the bus home From school. This is the least aexy I’ve been in a long time! Glad to Know I can Still #Uglify! https://www.instagram.com/p/CF4vpyZFWR8/?igshid=1f7th9h5knpav

[marios-note]

https://confrage.jp/node-js%E3%81%A7minify%E3%83%9F%E3%83%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%81%99%E3%82%8Buglify-js%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%A8minify%E3%83%9F%E3%83%8B%E3%83%95%E3%82%A1%E3%82%A4/

[lofihipbot]

lofi hip hop beats to uglify to

[netcell]

Encrypt your javascript application and decrypt by native code on loading html.

[webuwoamu-blog]

醜くな~れ

前回は助っ人プログラムについて書いた。あれからしばらく作業の引き継ぎに四苦八苦していたんだけど、結局私がやりすぎていたことが分かった。

というのも、ずっと助っ人プログラムの設定をいじくり回していたわけだが、実際は設定をほぼいじらない方が良かったのだ。

バイトにうちのやり方を叩き込むのではなく、バイトくんのやり方に合わせて仕事場を調整すると。それだけ助っ人が有能だということだ。

前回はYeomanって書いたけど、実際核となるのはGruntというツールで、こいつはバイトくんと言うより、大勢のバイトくんを束ねる仕切り屋さんみたいなやつだ。パッケージングという重要だけどちまちました作業をバリバリこなしてくれる。

パッケージングというのは、簡単に言えば、別々に組み立てたプログラムたちをコンパクトにまとめて圧縮する作業だ。ウェブはスピードが命だから、使用メモリを軽くしてくれる圧縮技術はかなり重宝される。

おまけにGruntは、プログラムが圧縮され過ぎて壊れないように保護までしてくれるという有能ぶり。

ちなみに、圧縮されたプログラムのコードは、機能はそのままでも見た目はぐっちゃぐちゃ。見た目は捨てるということで、この作業をuglify(ブサイク化)という。

[crowdhailer]

Grunt

A quick disclaimer: I no longer use grunt. I have changed to gulp because I prefer its code over configuration approach. However I think grunt still has great value for someone who wants the advantages of automation without all the details of JavaScript.

This is not an introduction to grunt, that is very well explained on the official site. Grunt is a task runner for JavaScript. That sounds very simple, you can use grunt to do tasks for you, however isn't all programming running prescribed tasks or programs. I would say yes and so what is the use of grunt? 

Grunt is nothing but a neat way to package tasks which are added as plugins. Essentially grunt has no value without the plugins that its community has generated. With these grunt is wonderful.

So with that here is a whirlwind intro to some of the grunt tasks I have made use of.

Concatenation contrib-concat

With this plugin you can automatically gather JavaScript/CSS saved in several locations and combine them to one file. This is best practise for performance by reducing HTTP request and speeding page load time. 

Minification contrib-uglify, css-min

There are plugins to minify JS, CSS and HTML. This decreases the sizes of assets by removing comments, white space and several other things that human readers find very useful. This reduced size of files to be served is also helpful in speeding up a page load time.

Watch contrib-watch

Automate the automated tasks, this task watches for changes to files, upon which it will run other grunt tasks. Save any changes in your js files and a new minified version will be ready almost instantaneously

Linting jslint 

Existing for JavaScript and CSS these task will check the quality of code you are writing, The value of jslint at catching mistakes is really huge.

Some More interesting task

The above are a powerful toolkit on there own, this next selection are more for the  curious

load-grunt-tasks

Efficiency or Laziness, whichever it is, it becomes contagious once grunt is running. This task saves you from having to individually add every grunt plugin to your grunt file. And will instead load every node package that is prefixed with 'grunt-'

time-grunt

This will record the time that each task takes to run. If a task is build of several tasks it will tell you the percentage time on each. So far this is more interesting than useful. It might provide early warning if you are minifying lots of images that you have too many as the time creeps up.

grunt-newer

This task provides can prefix any other task and will only run that task again if the files it is acting upon have changed since the last time the task was run. A useful way of speeding things up.

localtunnel-me

Not a grunt task but a great addition to the development workflow. Previously I was pushing a version of my project to heroku to show it to other people. This meant that my project was littered with commits such as 'test this new thing on phone'. Now this is all replaced with localtunnel. Grunt has several plugins that allow you to spin up a server with your project. with local tunnel you can take a locally running server and with no knowledge of how make it available the world over with one command

$ lt --port 8000

your local server port 800 will be made available at 'random.localtunnel.me' A really great service 

[qa-nature]

Get started with gulp Part 3: Uglify & environment variables

Get started with gulp Part 3: Uglify & environment variables

In this video, I’ll show you how you can use gulp with UglifyJS2. We’ll also use an environment variable called “NODE_ENV” to only minify our Javascript if w…

View On WordPress

[kimzer]

New Post has been published on Kimz Bblog

New Post has been published on http://blog.giiko.net/2014/04/15/%e5%87%ba%e5%9a%90-grunt/

出嚐 Grunt

其實長期以來，一直想要玩 grunt 卻總是各種理由拖延沒去好好研究，最近剛好遇到一些問題，想說可以好好整理一下架構，減少開發和測試的時間，那當然就非 grunt 不可啦…

是的，其實這頭牛看起來還真的有點兇，不過好用的東西哪管得了這麼多啊，反正重要的是，可以幫助開發、測試、除錯、產生文件、縮圖，而且還是全自動的，那當然要好好利用囉

這次測試大概主要只有使用幾個功能，測試環境也是在我的 MacOSX Mavericks 上執行，當然，為了方便起見，我還是安裝了 brew 的一些基本套件，既然不是文章的重點，就先略過這一部分的說明了

安裝 grunt 還挺簡單的，其實主要是要先安裝 grunt-cli 套件，這主要是 grunt 的主程式，畢竟大部分的功能都還是在 cli 執行的

# npm install -g grunt-cli

安裝 grunt-cli 套件只是前期工作，接下來就準備開始主軸了

  因為 grunt 主要是開發上輔助的角色，所以安裝其相依擴充套件時，要使用 –save-dev 的選項，這可以確保套件相依只是關於開發環境使用

當然，在最一開始，還是要在專案的環境中安裝 grunt 套件

# npm install –save-dev grunt

由於是出嚐 grunt 所以，其實我也只有安裝最基本的幾個套件：

grunt-contrib-yuidoc 主要是自動產生 yui 格式的文件

grunt-contrib-uglify 壓縮和醜化混亂 js

grunt-contrib-concat 結合檔案

grunt-contrib-qunit Unit test 工具

grunt-contrib-jshint jshint 工具，幫助檢查 js 語法的錯誤

grunt-contrib-watch 自動監控檔案更改狀態，並重新更新的套件

好了，廢話不多說，就一次全部安裝起來吧

# npm install –save-dev grunt-contrib-yuidoc grunt-contrib-uglify grunt-contrib-concat grunt-contrib-qunit grunt-contrib-jshint grunt-contrib-watch

由於 grunt-contrib-uglify 這套件還挺奇妙的，理論上應該可以結合多個 js 檔案，並一起壓縮/混亂才對，不過看來是得要使用 grunt-contrib-concat 才可以，所以程序就會變成： 先執行 concat 再執行 uglify

這次主要只有使用這幾個套件，不過因為 qunit 套件我是怎樣都無法測試成功，仍然在檢查原因，所以就暫時拿掉了

另外，希望把部分的要結合/壓縮混亂的 js 檔案一起處理，所以也把要處理的檔案放到 src/conn/ 裡面，產生一個 <%= pkg.name %>.join.js (專案名稱) 的檔案，並且對這個 .join.js 壓縮，所以兩個規則是相依相關的

此外，既然不是 css 高手，也懶得花太多時間去做 yuidoc 所產生出來的靜態頁面檔案，所以順便使用了 yuidoc-bootstrap-theme 這個套件，作為 yuidoc 主題和控制介面，並且將所產出的文件放在 docs/doc ，主題放在 docs/themes 中，所以執行以下的動作產生相關的目錄結

# mkdir -p src/conn# mkdir -p src/join # mkdir build # mkdir docs/doc # mkdir docs/themes # cd docs/themes # git clone https://github.com/kevinlacotaco/yuidoc-bootstrap-theme.git yuidoc-bootstrap.theme

建立好基本環境後，剩下的就只有 Gruntfile.js 這個檔案了，他也算是整個 grunt 的核心，為了要方便使用，我也另外做了 test 和 doc 兩個選項，可以單獨測試檔案項目，或是產生文件，原始碼如下：

 module.exports = function(grunt) /* Project configuration */ grunt.initConfig( pkg: grunt.file.readJSON(‘package.json’), yuidoc: compile: name: ‘<%= pkg.name %>’, description: ‘<%= pkg.descriptiton %>’, version: ‘<%= pkg.version %>’, url: ‘<%= pkg.homepage %>’, options: paths: ['routes', 'libs', '.'], outdir: ‘docs/doc’, exclude: ‘lib,docs,build’, themedir: ‘docs/themes/yuidoc-bootstrap.theme’, helpers: ['docs/themes/yuidoc-bootstrap.theme/helpers/helpers.js'] ,

concat: options: separator: ‘;’ , dist: src: ['src/conn/*.js'], dest: ‘src/join/<%= pkg.name %>.join.js’ ,

uglify: options: banner: ‘/*! <%= pkg.name %> <%= grunt.template.today(“yyyy-mm-dd”) %>*/\n’ , build: src: ‘src/join/<%= pkg.name %>.join.js’, dest: ‘public/js/<%= pkg.name %>.min.js’ ,

qunit:   /* seems cannot work correct on MacOSX */ all: ['test/**/*.html', 'views/**/*.html'] ,

jshint: files: ['./*.js', 'routes/**/*.js', 'src/**/*.js'], options: globals: exports: true ,

watch: files: ['<%= jshint.files %>'], tasks: ['jshint'] ); /* Load the plguin that provides the “uglify” task. */ grunt.loadNpmTasks(‘grunt-contrib-yuidoc’); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.loadNpmTasks(‘grunt-contrib-concat’); grunt.loadNpmTasks(‘grunt-contrib-qunit’); grunt.loadNpmTasks(‘grunt-contrib-jshint’); grunt.loadNpmTasks(‘grunt-contrib-watch’); /* Default task(s) */ grunt.registerTask(‘default’, ['yuidoc', 'jshint', 'concat', 'uglify', 'watch']); // grunt.registerTask(‘test’, ['qunit']); grunt.registerTask(‘test’, ['qunit', 'jshint']); grunt.registerTask(‘doc’, ['yuidoc']); ;

這只算是初次嘗試，所以有些項目可能還設想的不夠周到，不過最基本的雛形已經有了，如果要執行全部功能，則

# grunt

如果是要單純測試

# grunt test

另外，要產生 yuidoc 的話，就

# grunt doc

這樣就可以滿足最基本環境建置的功能了，接下來就可以好好研究 yeoman 了