jsdeと一息指示

ヒスイは、HTMLテンプレートエンジンに基づいてHAMLあり、それはパグに変更されました

インストールグローバルNPMインストールヒスイ-g

新しいフォルダのヒスイを作成し、ファイル名の接尾辞.jadeの構築
.jadeファイルを編集します

ヒスイ-P -w index.jadeヒスイ生成フォルダ内のモニター・ファイルの変更、下のhtml

index.jadeファイル

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

DOCTYPE HTML HTML 頭 のMeta（文字コード= 'UTF-8'） タイトル私のウェブサイトの 身体の DIV |笑 A：IMG（SRC = '＃'） DIV（スタイル= {幅： "100pxに"、高さ： "100pxに"}） テストのdiv div要素（クラス=「テスト」）私は一種名声テストのDIVた 私は一種の名声テストのdivのた.TEST 私はdiv要素のid MYID呼ば#myid .myclass＃myidsを、私はまた、div要素のidのクラスを持っています -var名=「ジョン・ドウ」 div要素 の名前は{名前}＃ //私はコメントである // 私がコメントしたが 、私は注2 // -私はヒスイのノートだ - // 私はヒスイのコメントでした 注2 I翡翠 UL -for（VARは、I = 0; I <3; I ++） のLiのLi Iサイクル -var ARR = [ "ボブ"、 "小マクロ"、 "ペイ"] ヴァルのためのARRに P {ヴァル}＃ -var ARR = [{名： "Xiaohua"、年齢： "20"} 、{名： " 李新"、年齢： "10"}] ヴァルのためのARRにおける P名＃{Valで。 {名前}年齢val.age}＃ -var OBJ = {名： "プリンセス"、年齢： "25"} 項目について、OBJインデックスに P＃{インデックス}属性プロパティの値が項目がある} {＃ -var真裁判官=の IF裁判官 のp裁判官の値がtrueにある 他 のp裁判官はfalseに値 -var NUM = 3 ケースNUM 1 P＃{NUM}は同じである。1 2 P＃{NUM}は2に等しい 3とき P＃は{NUM}は3に等しい 大きい列   jsdeとグッ説明 "ライン">デフォルト P＃{NUM}他の値 // - JS書き込ま 。スクリプト（タイプ= 'テキスト/ JavaScriptの'） はconsole.log（ "こんにちは"） 機能試験（）{ にconsole.log（ "I試験機能"） } // -ラッパー関数 一覧ミックスイン UL I = 0 -for（VAR; I <3。++ I） のli Iのliマイル内容 // -ラッパー関数を呼び出す +リスト 一覧+ // -ペットHTML定義された ミックスインPET（名前、性別） Pのペットの名前は＃{名前}ペットセックス{性別}＃ // -コール・パラメータ渡し +ペットを（ "大黄"、 "母"） +ペット（「小さな強い」、「男性」）

ヒスイ基本的な構文：

このような単純な静的などの代わりに、以前のHTML階層包含関係の1インデント関係は、インデントやタブに一貫して使用スペースに、注意を払うように表すことができ、混在させないでください

2.書き込みインラインレベル、：IMG

3.style属性：DIV（スタイル= {幅：」200pxの」色」赤」}）

4.「 - 」出力可変要素に「=」を使用して、変数を定義します。

＃5〜{変数}補間値対応する変異体

素子であって、ラベルの右に括弧で6.html（決意によっては添加してもよい）属性

7.テキスト
パイプ記号の前に単語を追加することでは「|」コンテンツとして出力HTMLコンテンツラベルタグ番号のHTMLタグラベル本の後にスペースで区切られた玉は、加算ブロックレベルに存在イングランドによって追加される可能です「」。

8.注：あなたは、二重スラッシュのコメントを入力することができます

9.循環

10.分析声明デフォルトの場合、「他にあれば」

11.mixinラッパー関数呼び出し、および

12.js書き込み、CSSの書き込み

一気使用

グッが開発を達成するために、ノードのWebフロントエンドの自動化ツールに基づいており、それは大幅に開発効率を向上させることができます。あなたはまた、多くのことを行うことができますゴクゴク

1. CSSの圧縮
2. 図圧縮
3. コンパイルサス/ LESS
4. CoffeeScriptのコンパイラ
5. 値下げは、HTMLに変換
   6.圧縮組み合わせるJS

圧縮JSに使用ゴクゴク

1.在jade同级建立gulp文件夹,再建立gulpfile.js配置文件

2.在gulp路径下安装gulp

sudo npm install gulp

3.获取到压缩的js的模块gulp-uglify和压缩css的模块gulp-minify-css

npm install gulp-uglify –save

npm install gulp-minify-css –save

这样我们gulp文件夹里地package.json配置文件里就会有者两个模块

4.在gulpfile.js里面引入gulp模块

5.在gulpfile.js里面创建压缩任务：下面我们创建两个压缩任务：js和css

创建压缩任务：gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务 内容。
gulp.src(path) - 选择文件，传入参数是文件路径。
gulp.dest(path) - 输出文件
gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

6.监听文件修改：

监听文件修改：gulp.task(‘auto’, function () {
// 监听文件修改，当文件被修改则执行 script 任务 gulp.watch(‘js/*.js’, [‘script’])
})

7.终端进入gulp路径下，输入命令：

gulp mytask

gulp auto

就能实时监控app文件夹下的js文件和css文件，当文件内容有变化时，会自动在build文件夹下生成压缩后的文件