• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

una/gulp-starter-env: A basic gulp environment with autoprefixer and minifcation ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

una/gulp-starter-env

开源软件地址(OpenSource Url):

https://github.com/una/gulp-starter-env

开源编程语言(OpenSource Language):

JavaScript 89.4%

开源软件介绍(OpenSource Introduction):

Starter Environment

What's set up here:

  • Sass (LibSass)
  • Autoprefixer
  • CSS Minification
  • JSHint
  • Scss Lint (based on this config)
  • HTML Minification
  • BrowserSync
  • Image Minification
  • GH-Pages deployment from dist/ folder

To Get Started:

  1. Install node and make sure npm (Node Package Manager) is also installed
  2. Clone this repo with git clone https://github.com/una/gulp-starter-env <your-project-name> to build this repo into your own project or download the zip
  3. In terminal, cd (change directory) to the folder containing your project.
  4. Run rm -rf .git to remove the Git file from the repo and git init for a clean history
  5. npm install to download dependancies
  6. In the terminal, enter gulp to make everything run
  7. Take note of the Access URLs provided in your terminal. Your web page should pop up at http://localhost:3000. You can access this same page on your various devices in the same wifi network with the provided External URL. You can share the External URL with coworkers and they'll see whats on your screen.
  8. Edit your Sass code inside of the scss folder. You can make subfolders inside of that to better organize your code. Prefix your sass files with an underscore. More info on using @import to organize your files here
  9. Your minified files will be automagically created and updated in dist/. It will create your optimized css, html, and javascript files for you. Never edit files within the dist/ folder. (Dist stands for Distribution)
  10. Keep gulp running while you're making changes. When you want to close out of the gulp task, in the terminal, hit ctrl + C

Linting

This linter is the only ruby dependency in this project (and it's optional)

File Linting is where you read your file to make sure that your code conforms to standards. You should be doing this continuously.

If you're using a text editor like Sublime, I'd recommend installing SublimeLinter and SublimeLinter-contrib-scss-lint. You can also lint with gulp inside of your terminal by running gulp scss-lint. Similar linters are available for other text editors.

Deploying to gh-pages

You can run gulp deploy to push your site onto the gh-pages branch. Then, you can navigate to it via http://< your-github-username >.github.io/< project-name > Note: this doesn't work if your project name is < your-github-username >.github.io.

Commonly Confusing Terms

  • cd: change directory (a terminal command). Make sure you have a space between cd and the location you are navigating to
  • repo: repository (this is a 'repository' of code)
  • sudo: you get access as a 'super user' of your system (you can override permissions)
  • npm: node project manager -- the command line task manager that is installing everything inside of package.json
  • package.json: a file with information about your project. This is also where your list of dependencies lives which npm installs
  • gulp: a task manager that is running a bunch of scripts to make this environment work
  • dist: distribution folder -- don't edit anything in here. It is where your gulp task builds into
  • scss: a Sass syntax that imitates CSS



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap