使用acmd构建jade/sass/livescript开发环境

左手 posted @ 2016年9月09日 23:31 in 前端开发 with tags 前端 编译jade 编译sass 编译livescript 前端编译工具 , 3287 阅读

之前写过一个browserSync的脚本编译jade/sass/coffee,在多个项目中拷贝脚本文件比较麻烦,业余封装了一个npm插件,这里介绍一下用法。
项目地址:https://github.com/thinkjs/autocommand-cli,插件使用typescript开发,欢迎有兴趣的同学一起完善。

环境搭建

1.创建目录

mkdir example && cd example
mkdir _source _source/jade _source/sass _source/live
mkdir html html/css html/js

_source目录存放源代码,_source/jade、_source/sass、_source/live分别存放jade、sass、livescript源文件。html目录存放生成结果,html、html/css、html/js分别存放html、css、js文件。

2.安装npm包依赖

echo '{}' > package.json
npm install thinkjs/autocommand-cli#latest jade node-sass livescript --save-dev

如果网络不好,建议使用cnpm替代

3.编辑package.json加以下内容:

"scripts": {
  "acmd": "acmd",
  "start": "acmd watch",
  "build": "acmd run"
},

完整的package.json如下

{
  "scripts": {
    "acmd": "acmd",
    "start": "acmd watch",
    "build": "acmd run"
  },
  "devDependencies": {
    "autocommand-cli": "thinkjs/autocommand-cli#latest",
    "jade": "^1.11.0",
    "livescript": "^1.5.0",
    "node-sass": "^3.9.3"
  }
}

4.创建acmd配置文件并修改

npm run acmd -- config -i
默认在当前目录下创建名为_config的配置文件,编辑该配置文件
修改file字段内容为:
"file": ["_source/**/*.{jade,sass,ls}"],

修改define字段内容为:

"define": {
  "_source/": {
    ".jade": {
      "file": "html/#{fileName}.html",
      "command": "jade -Po html/ #{file}"
    },
    ".sass": {
      "file": "html/css/#{fileName}.css",
      "command": "node-sass --output-style compact #{file} html/css/#{fileName}.css"
    },
    ".ls": {
      "file": "html/js/#{fileName}.js",
      "command": "lsc -co html/js/ #{file}"
    }
  }
},

修改 browserSync > init下的server为:

"server": {
  "baseDir": "html/"
},

完整配置文件如下:

{
  // 侦听的文件
  "file": ["_source/**/*.{jade,sass,ls}"],
  // 过滤
  "ignore": ["_*.*", "node_modules/"],
  // 变量
  "variable": {
    "localBin": "~/node_modules/.bin"
  },
  // 环境变量
  "environment": {
    ":PATH": "#{localBin}"
  },
  // 定义
  "define": {
    "_source/": {
      ".jade": {
        "file": "html/#{fileName}.html",
        "command": "jade -Po html/ #{file}"
      },
      ".sass": {
        "file": "html/css/#{fileName}.css",
        "command": "node-sass --output-style compact #{file} html/css/#{fileName}.css"
      },
      ".ls": {
        "file": "html/js/#{fileName}.js",
        "command": "lsc -co html/js/ #{file}"
      }
    }
  },
  // browserSync配置
  "browserSync": {
    // 初始化配置
    "init": {
      "server": {
        "baseDir": "html/"
      },
      "open": false,
      "ui": false
    },
    // 启动livereload
    "reload": true
  }
}
// vim: se sw=2 ts=2 sts=2 ft=javascript et:

开发

1.编译jade文件

创建_source/jade/index.jade,内容如下:

doctype html
html
  head
    title jade page
  body
    h1 hello world

在terminal中运行 npm start,浏览器访问 http://localhost:3000,可查看页面。

2.编译sass文件

创建_source/sass/style.sass,内容如下:

html, body
  padding: 0
  margin: 0
  font-size: 16px

h1
  color: green

编辑_source/jade/index.jade加入对style.sass的引用,在head中插入以下内容:
link(href="css/style.css" rel="stylesheet")
保存查看浏览器,内容已自动刷新。

3.编译livescript文件

创建_source/sass/script.ls,内容如下:
console.log \hello

编辑_source/jade/index.jade加入对script.ls的引用,在body中插下以下内容:
script(src="js/index.js")
保存可查看浏览器中的控制台输出。

进阶用法

1.编译所有文件

有时需要对项目的所有源文件进行编译,使用如下命令:
npm run build

2.编译某一类型文件

比如需要编译所有的sass文件,可以使用如下命令:
npm run build -- -f _source/sass/*.sass

3.使用glob表达式匹配文件

-f选项支持glob表达式,使用引号括起即可,例如编译jade和sass可以使用如下命令:
npm run build -- -f '_source/**/*.{jade,sass}'

4.使用通道

如果使用git管理文件,需要编译git中已经修改的文件,可以使用如下命令:
git status -uno | awk '{print $2}' | npm run build -- -o
使用find查找sass进行编译,命令如下:
find _source -type f | grep *.sass | npm run build -- -o

小结

autocommand-cli项目最初的出发点是为了锻炼一下typescript的能力,经过半年的迭代,功能已经逐渐完善。命令行参数解析、文件改动侦听、http服务器功能都使用现成npm插件实现。前端的工具链不断完善,各种工具层出不穷,花大量时间造一个自己用起来的顺手的工具还是有点奢侈:)

Avatar_small
Mike 说:
2020年4月23日 06:23

Very helpful blog post! There is a great deal of information here that can assist any organisation get started with an effective social networking campaign. Funny Wifi Names 2020

Avatar_small
Matt 说:
2020年4月28日 05:28

I examine your blog every day as well as try to learn something from your blog site. Thank you as well as waiting for your new post.

Avatar_small
Ric Thomas 说:
2020年5月01日 09:19

Positive site, where did u create the details on this publishing?I have checked out a few of the write-ups on your web site currently,and I really like your design. Thanks a million as well as please keep up the effective work. kbc winner list

Avatar_small
Ric Thomas 说:
2020年5月02日 10:33

Superior post, stay on par with this extraordinary job.It's nice to know that this topic is being likewise covered on this web site so joys for taking the time to discuss this! Thanks time and again!  kbc head office number

Avatar_small
Ric Thomas 说:
2020年5月07日 06:31

Extremely helpful blog post!
There is a great deal of details below that can aid any type of
business start with an effective social networking project. kbc winner list

Avatar_small
Ric Thomas 说:
2020年5月07日 06:34

The most effective write-up I found a variety of years,
write something concerning it on this web page.  kbc lottery winner

Avatar_small
Ric Thomas 说:
2020年5月07日 06:39

This is a wonderful article I have actually seen due to the deal it.
It is really what I expected to see count on the future you will continue in sharing such a mind-blowing message. kbc lottery winner

Avatar_small
Ric Thomas 说:
2020年5月07日 06:40

You obtained a terrific blog.
I will certainly have an interest in even more similar subjects.
I see you obtained really extremely beneficial subjects,
i will be constantly inspecting your blog thanks. kbc lottery winner 2020

Avatar_small
Ric Thomas 说:
2020年5月11日 23:22

I obtained way too much fascinating things on your blog. I think I am not the just one having all the pleasure right here! Maintain up the good work. kbc

Avatar_small
Ric Thomas 说:
2020年5月11日 23:48

Believe it or otherwise, it is the kind of info I've long been looking for. It matches my requirements a great deal. Thank you for creating this details. kbc registration

Avatar_small
Ric Thomas 说:
2020年5月11日 23:48

I check out a whole lot of blog posts, however I never ever heard a topic like this. I Love this topic you made regarding the blog owner's container checklist. kbc lottery

Avatar_small
Andrew Strauch 说:
2020年5月23日 09:49

I obtained so engaged in this material that I could not wait to check out. Many thanks. kbc winner list

Avatar_small
Andrew Strauch 说:
2020年5月23日 10:01

Superior blog post, stay on top of this outstanding job. It's good to understand that this subject is being additionally covered on this internet website so joys for making the effort to review this! Many thanks once again and also again! kbc lottery winner

Avatar_small
Andrew Strauch 说:
2020年5月23日 10:35

Outstanding post. Thanks to this blog my expedition has finished. kbc contact number

Avatar_small
Andrew Strauch 说:
2020年5月23日 10:46

Your work is truly valued round the world as well as the clock.
It is a practical and exceptionally extensive blog site. kbc lottery winner

Avatar_small
Andrew Strauch 说:
2020年5月23日 11:14

I'm certain that you will certainly be making an actually useful place. Excellent perform! kbc lottery

Avatar_small
Andrew Strauch 说:
2020年5月25日 14:53

I inspect your blog every day as well as try to learn something from your blog. T
hanks and waiting for your new message.  best email marketing app for shopify

Avatar_small
Andrew Strauch 说:
2020年5月28日 12:14

Positive website, where did u create the details on this publishing? I have actually read a few of the write-ups on your website now, and I actually like your design. Many thanks a million and please keep up the efficient job. jio lottery 2020

Avatar_small
Andrew Strauch 说:
2020年5月28日 12:19

Your job is truly valued round the globe and also the clock. It is a useful and also unbelievably thorough blog. kbc winner 2020

Avatar_small
Andrew Strauch 说:
2020年6月05日 06:53

Favorable site, where did u think of the details on this posting? I have checked out a few of the posts on your internet site currently, and also I really like your design. Thanks a million as well as please maintain the effective work. kbc winner list

Avatar_small
Andrew Strauch 说:
2020年6月05日 07:53

Great Article it's really informative and also innovative maintain us posted with brand-new updates. its was really valuable. many thanks a lot. kbc lottery winner

Avatar_small
Andrew Strauch 说:
2020年6月05日 10:27

I'm sure that you will certainly be making a really useful place. Great carry out! kbc contact number

Avatar_small
Andrew Strauch 说:
2020年6月05日 10:30

This is an incredible blog post I have seen due to the fact that of the deal it. It is actually what I anticipated to see rely on the future you will continue in sharing such a wonderful blog post. kbc lottery winner

Avatar_small
Andrew Strauch 说:
2020年6月05日 11:25

Normal sees provided below are the simplest method to value your energy, which is why I am going to the internet site every day, looking for brand-new, interesting information. Thank you! kbc lottery

Avatar_small
Andrew Strauch 说:
2020年6月05日 11:27

Superb post. I was always inspecting this blog, as well as I'm pleased! Incredibly useful info specifically the last part, I take care of such info a great deal. I was exploring this certain information for a lengthy time. Thanks to this blog site my expedition has ended. kbc winner 2021

Avatar_small
Andrew Strauch 说:
2020年6月05日 11:30

No question this is an excellent message I got a great deal of expertise after checking out best of luck. The style of the blog is superb there is nearly everything to read, Brilliant article. jio lottery 2021

Avatar_small
Andrew Strauch 说:
2020年6月07日 07:00

Positive site, where did u come up with the details on this uploading? I have checked out a few of the short articles on your web site now, and also I really like your design. Many thanks a million as well as please maintain the efficient work. dog training collar

Avatar_small
Andrew Strauch 说:
2020年6月12日 10:50

Fabulous message, you have represented out some fantastic points, I furthermore assume this s a really wonderful site. I will see once more for even more top quality web content and also, suggest this website to all. Many thanks. kbc lottery 2021

Avatar_small
Andrew Strauch 说:
2020年6月12日 11:32

Because of the offer it, this is a wonderful article I have seen. It is actually what I expected to see count on the future you will proceed in sharing such a mind-blowing message. kbc head office number

Avatar_small
Andrew Strauch 说:
2020年6月12日 11:56

I inspect your blog site every day and try to discover something from your blog site. Thank you as well as waiting for your brand-new blog post. jio lottery winner

Avatar_small
Andrew Strauch 说:
2020年6月12日 13:23

Superb article. I was constantly checking this blog, and I'm impressed! Incredibly beneficial info specially the last part, I take care of such information a whole lot. I was exploring this certain details for a long period of time. Many thanks to this blog site my expedition has finished. kbc lottery winner 2021

Avatar_small
Andrew Strauch 说:
2020年6月12日 13:26

No question this is an outstanding message I obtained a great deal of understanding after reading best of luck. The motif of the blog is outstanding there is nearly every little thing to review, Brilliant post. kbc lucky draw 2021

Avatar_small
Andrew Strauch 说:
2020年6月12日 14:03

Fantastic task here on. I review a great deal of blog articles, yet I never ever heard a subject such as this. I Love this topic you made about the blog owner's container listing. Extremely clever. kbc winner list

Avatar_small
Andrew Strauch 说:
2020年6月12日 14:06

Superior blog post, stay on par with this extraordinary work. It's great to recognize that this topic is being also covered on this internet site so cheers for making the effort to discuss this! Many thanks time and again! kbc head office number

Avatar_small
Andrew Strauch 说:
2020年7月06日 18:56

Exceptional post. Many thanks to this blog my expedition has ended. המוצר הזה

Avatar_small
Andrew Strauch 说:
2020年7月10日 05:20

Very wonderful write-up, I delighted in reviewing your message, very great share, I desire to twit this to my followers. Many thanks! kbc lucky draw 2021

Avatar_small
Andrew Strauch 说:
2020年7月10日 05:24

Hi there, I found your website through Google while looking for an associated subject, your web site turned up, it looks wonderful. I have actually bookmarked it in my google book marks. kbc lottery winner 2021

Avatar_small
Andrew Strauch 说:
2020年7月11日 04:52

Really pleased! Every little thing is really clear and also extremely open explanation of problems. It includes true realities. Your website is extremely valuable. Many thanks for sharing. kbc winner list

Avatar_small
Andrew Strauch 说:
2020年7月11日 04:53

I want you to give thanks to for your time of this terrific read!!! I absolutely enjoy every bit of it and I have you bookmarked to have a look at brand-new stuff of your blog site a must-read blog site! kbc official website

Avatar_small
Andrew Strauch 说:
2020年7月15日 07:06

I check out a lot of blog posts, however I never listened to a subject like this. I Love this topic you made about the blogger's bucket listing. kbc lottery winners

Avatar_small
Andrew Strauch 说:
2020年7月16日 04:19

You have done a terrific work on this article. You have also handled to make it understandable and very easy to check out. kaun banega crorepati lottery check

Avatar_small
Andrew Strauch 说:
2020年7月16日 05:26

I obtained so engaged in this material that I could not wait to check out. Thanks. 网课代写

Avatar_small
Andrew Strauch 说:
2020年7月16日 05:28

I can not wait to dig kickoff and deep utilizing resources that I obtained from you. Your liveliness is rejuvenating. paragonpoker

Avatar_small
Andrew Strauch 说:
2020年7月16日 19:21

I check out a whole lot of blog articles, yet I never listened to a subject like this. I review a lot of blog posts, but I never heard a topic like this. Positive website, where did u come up with the info on this posting? I just stumbled upon your blog as well as wanted to state that I have actually truly enjoyed surfing your blog site messages. Positive site, where did u come up with the information on this posting? kbc whatsapp number

Avatar_small
Andrew Strauch 说:
2020年7月17日 19:04

It is genuinely a well-researched material and superb phrasing. I got so involved in this product that I couldn't wait to read. I am impressed with your job as well as ability. Thanks. kbc lottery check up

Avatar_small
Andrew Strauch 说:
2020年7月19日 06:20

Hi there, I located your internet site through Google while looking for a related subject, your website showed up, it looks wonderful. I have actually bookmarked it in my google book marks. Hppoker

Avatar_small
Andrew Strauch 说:
2020年7月19日 06:22

I'm certain that you will certainly be making a truly useful place. Good do! mybestpoker

Avatar_small
Andrew Strauch 说:
2020年7月19日 06:24

I review a whole lot of blog site messages, yet I never heard a subject like this. I check out a great deal of blog articles, but I never ever heard a topic like this. Favorable website, where did u come up with the info on this publishing? I just stumbled upon your blog and also wanted to claim that I have actually enjoyed searching your blog site posts. Positive site, where did u come up with the information on this posting? Lexispoker

Avatar_small
Andrew Strauch 说:
2020年7月21日 06:15

I review a whole lot of blog articles, however I never listened to a topic like this. I Love this topic you made regarding the blogger's bucket list. Judi Slot Online

Avatar_small
Andrew Strauch 说:
2020年7月26日 05:47

Hi there, I located your website through Google while looking for a relevant topic, your site came up, it looks terrific. I have bookmarked it in my google book markings. kbc prize winner file

Avatar_small
Andrew Strauch 说:
2020年7月26日 05:55

Really informative post! There is a lot of details below that can help any business start with a successful social networking project. Jio 25 Lakh Lottery Winner List

Avatar_small
Andrew Strauch 说:
2020年7月26日 05:55

Extremely great post, I took pleasure in reviewing your article, really good share, I want to twit this to my fans. Thanks! dndpoker

Avatar_small
Andrew Strauch 说:
2020年7月27日 05:31

Actually pleased! Whatever is very open and also really clear explanation of problems. It contains true facts. Your website is extremely beneficial. Many thanks for sharing. kbc jio lottery winner

Avatar_small
Andrew Strauch 说:
2020年7月27日 05:31

I want you to give thanks to for your time of this terrific read!!! I definitely take pleasure in every little of it and also I have you bookmarked to have a look at brand-new stuff of your blog site a must-read blog! kbc new year lucky draw 2020

Avatar_small
Andrew Strauch 说:
2020年8月08日 22:55

Thanks for sharing nice info with us. I like your blog post and all you show to us is up to date and also fairly useful, I would love to bookmark the web page so I can come right here again to read you, as you have actually done a remarkable task. 먹튀검증사이트

Avatar_small
Andrew Strauch 说:
2020年8月12日 16:41

Favorable site, where did u create the details on this publishing? I have actually reviewed a few of the posts on your website now, and I really like your style. Thanks a million and also please maintain the efficient job. แทงบอลออนไลน์

Avatar_small
Andrew Strauch 说:
2020年9月10日 22:14

Routine brows through detailed right here are the most convenient technique to value your energy, which is why I am mosting likely to the internet site daily, looking for new, intriguing information. Thank you! บุหรี่ไฟฟ้า

Avatar_small
Andrew Strauch 说:
2020年9月24日 03:50

Fabulous post, you have actually signified out some amazing factors, I likewise believe this s a very fantastic site. I will see once more for even more top quality content and also, recommend this website to all. Many thanks. QR Code Generator

Avatar_small
Andrew Strauch 说:
2020年10月27日 06:29

I value this article for the well-researched material as well as outstanding phrasing. I got so thinking about this product that I couldn't quit reading. Your blog site is really remarkable. radio app

Avatar_small
Andrew Strauch 说:
2020年11月09日 22:33

Superior blog post, stay up to date with this outstanding work. It's wonderful to recognize that this subject is being additionally covered on this internet site so joys for taking the time to discuss this! Thanks again and once more! 卡式台胞證

Avatar_small
Andrew Strauch 说:
2020年11月11日 10:40

Positive site, where did u create the info on this posting? I have read a few of the articles on your web site currently, and I truly like your style. Thanks a million as well as please keep up the reliable job. 臺胞證

Avatar_small
Andrew Strauch 说:
2021年1月19日 06:23

Hey, what a fantastic post I have found as well as thought me I have actually been looking out for this similar type of message for past a week and rarely encountered this. Thank you very a lot and also I will certainly search for even more postings from you. notes


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter