Foundation 6 Command Line Tools Getting Started Guide
Foundation 6 provides a variety of ways to use and tools. You can download static files, or use Yeti Launch (a desktop application for Mac, Windows version is coming soon).
Little is known to be that Foundation 6 also provides a set of command line tools, which will be described in this article. Foundation 6 is a very flexible front-end framework that has powerful developer tools in addition to many obvious CSS features and JavaScript plugins.
npm install --global foundation-cli. You may be wondering, since you can use static JavaScript and CSS files (which work very well), why bother using CLI tools? You may need a standard structure and an easy-to-use process, which is OK.
I believe you can achieve your goals this way, but I understand that many developers want more control over the build process. This includes SCSS compilation, connection, compression, image optimization, and templates. I prefer using these extra tools. Therefore, in some cases, CLI tools may be a better choice.
If you use the command line frequently and are not sure what Foundation 6 offers in this regard, or you don't use the command line and may want to learn something new, this article is for you.
First, you need to install NodeJS and npm tools (usually installed with NodeJS). You also need Git, Gulp, and Bower, and foundation-cli will use all of these tools. You can run the following command to install:
$ npm install --global gulp bower
On some systems, you may need superuser access, especially when installing npm packages globally, so you may need to use sudo before the commands described in this article.
If you already have Foundation 5 CLI installed on your computer, you can only access one command (depending on your command line environment configuration). Therefore, it is best to delete the old tool first. You can do this using the following command:
$ npm install --global gulp bower
And install the new CLI tool:
$ gem uninstall foundation $ npm uninstall --global foundation-cli
You can read more about installation in the Foundation's documentation.
If you don't want to install foundation-cli on your system and have installed Gulp and Bower in the past, just clone the repository containing Foundation templates and use the gulp and npm commands instead of the foundation command. Everything should be the same as when using foundation-cli .
As mentioned earlier, the Foundation CLI uses Gulp and Bower in the background. What are Gulp and Bower? Gulp is a toolkit that helps you automate tedious or time-consuming tasks in your development workflow. Here, we can consider SCSS compilation, compression, connection, and also perform image compression or other useful tasks. Bower is a web package manager that allows you to download and install front-end libraries from the command line. For example, installing jQuery requires only one line of command: bower install jquery.
Foundation CLI Download and install blank templates for three Foundation frameworks (Sites, Apps, and Emails). All of these templates are ready to work with Gulp and Bower and are pre-configured with Gulp tasks and Bower installation sources. This is similar to tools like Yeoman.
After installing foundation-cli, you can start using it by running the following command:
$ npm install --global foundation-cli
As you can see, we are using foundation instead of foundation-cli. Additionally, we only look at the zurb premium templates for Foundation for Sites. We need to use the --framework logo to select the correct frame, and we also need to use the --template logo to select the correct template. You can also choose a basic template, but I think advanced templates are much better if you want to take a closer look.
After installing, you should have a project folder (the name is provided during the installation process). Also, all dependencies should be installed there. All you need to do now is go into the newly created project and go into the folder and run:
$ foundation new --framework sites --template zurb
This is the magic! This will run Gulp build and server tasks as well as watch commands. This means it triggers all configured Gulp tasks that you can see in your code. So when you run this command, you should see some information in the console. The most important information at present is:
$ foundation watch
Here is information about the server you are running. The first one is your actual application, and you also have a UI server for BrowserSync testing (we'll discuss it later). You can see that your application files are provided from the dist directory, you can access http://localhost:8000 in your browser and view the standard Foundation 6 launch template.
I think this is the most exciting part, but before we get to this point, we have to complete all the installation process.
Let's take a look at the folder structure of the newly created project. The most important folders are src and dist. Your development work is mainly done in the src folder, and all production files will be prepared in the dist folder. The server you are running also serves files from that folder. This means you can prepare the workspace as needed, but eventually, the production-ready file will be in the dist folder, which is what you want to provide as a finished product.
So, how is this implemented? Let's take a look at the most important document here - gulpfile.js. If you are not familiar with Gulp, you may want to check out this introductory tutorial. Gulp doesn't look as scary as it was at first, but it's important because this is where all the magic happens.
Gulp is based on many Gulp plugins that add additional features through simple npm packages. In this new Foundation project, they are defined in package.json. They will also be automatically downloaded and installed when running foundation new (as mentioned above), so you don't need to worry about it.
When you open a Gulp file, you can see that each task (such as clean, copy, sass, and JavaScript) is defined in a similar way using a special Gulp plugin responsible for this specific work part. Additionally, as you can see at the bottom of the file, there are major tasks like "build" or "default" that aggregate other tasks. The Foundation boilerplate is configured so you basically don't need to do anything. Of course, you can adjust as needed.
With this configuration, you can write scss in the src/assets/scss folder and JavaScript files in the src/assets/js folder. You can also place the image in the src/assets/img folder. When you run foundation watch or foundation build, all of these files will be copied to the dist folder. Depending on the options, they can be compressed, or the images can be optimized. All of this is configured in gulpfile.js.
Gulp configuration and its plugins are the topic of another article. Now let's take a look at the .html file and use Panini to create advanced layouts and relationships.
Panini is a great and simple tool built by the Foundation team. With Panini, you can create pages with consistent layouts and reusable sections.
In your dist folder, you have static HTML files that you can use immediately. Of course, if you only have one file, everything is simple. Problems may occur when you want to create many HTML files with several identical parts. It can be a footer, sidebar, header, or many other elements called "parts".
Without Panini, you need to copy all the duplicate code into each HTML file, and if you need to change, you must either make changes manually in each file or find and replace in a text editor. With Panini, you can do all of this in one place while editing, and all files will be edited and copied into the dist folder.
Equally important, Panini is based on the Handlebars template library. It can also compile Markdown in your HTML file. For more information about Panini, see the Foundation's documentation.
Let's take a look at the folder structure of the Panini template in the project. We need to open the src folder. Here we have data, layouts, pages and partials. As you might expect, in the layouts folder we can write our main layout scaffolding. Here we can define a header and footer that will be repeated on all pages.
If you want to use only one layout, just name the file default.html. You will find such a demo file in our project. If you want to use multiple layouts, you can create more files with special body tag {{> body}} (see default.html example), and you need to use special tags in the page to tell the compiler which layout the page should use. This is called Front Matter, as shown below:
$ npm install --global gulp bower
These marks should be placed at the top of the page file content. This only applies to pages that will use this layout, and all other pages will use the default layout.
Let's take a look at the pages folder. In this folder, you will find the index.html file, which is a content demo page. As you can see, it doesn't have any html or body tags. This is because it will just be injected into the default.html layout discussed earlier. Of course, you can add similar pages, but some pages may use different layouts.
If you want some small, reusable HTML elements, you can create them in the partials folder. There are no files in our demo project, but it's very simple. Just create a file with HTML snippets and name the file. Then, in your layout file or page file, you can import this section by using something like {{> my-partial-file}} (note that there is no file extension). That's it. All content will be connected, compiled and copied into the dist folder.
There is also a folder called data. Here you can provide some data in the format of .json or .yml files. For example, suppose I have a myList.json file in the data folder, which has the following content:
$ gem uninstall foundation $ npm uninstall --global foundation-cli
In a layout page or part of an HTML file, I can use something like the following:
$ npm install --global foundation-cli
This allows you to iterate over the JSON data and generate some HTML. We should get a list of items with names in the array.
As you can see, Panini is a very useful tool when you want to create complex HTML structures and don't want to repeat yourself.
The last preconfigured feature of the Foundation CLI tool I've discussed is BrowserSync. As you know, front-end work is hard because you need to test your website on many devices and many resolutions. Now imagine you have a large table where many different devices connect to your website. When you click on something or scroll through a page, all devices will do the same. This is great because you can see in real time what needs to be corrected and what doesn’t work well.
The projects we create automatically provide your external IP address (see above). You can get it and paste it into browsers on all different devices to connect to the same BrowserSync engine and start testing.
BrowserSync also provides real-time changes, so if you save something, it will appear in the browser window without manually refreshing the page. It will also appear on all connected devices, and you can get all of these features for free without any extra work with foundation-cli and zurb templates. How great is this?
I personally think the Zurb Foundation team has done a great job of providing developers with powerful tools and scaffolding. This is also important. More than just some plugins and CSS styles that are ready to use right away. Using Foundation for Sites 6 was a great experience. Imagine how much backend programming work you can accomplish using the Foundation CLI tool. You can create static websites and blogs, and they can also be quite advanced. Not to mention, in many cases, static blogs and websites are even faster and better.
I highly recommend that you take a closer look at Panini. You can also find some documentation in the npm package readme. It can do many powerful features that I don't describe here, such as Markdown compilation or custom assistant. You can also read about Gulp and carefully view all Gulp tasks used in the zurb template/project generated by the foundation-cli tool.
One more thing - I didn't mention compressed CSS and JavaScript files. If you are using the foundation watch command, there will be CSS and JavaScript files in the dist folder, but they will not be compressed. If you want production-ready files in that folder, just run foundation build. If you want to learn more about the foundation command, just run the foundation help command. When you need to update dependencies in your project, you can run foundation update.
All in all, I hope you learned something here. If you have any questions, please let me know in the comments, or check out my profile for different ways to contact me.
To use Foundation 6's CLI tool, you need to install Node.js (0.12 or later) and Git on your system. Node.js is the JavaScript runtime required to run the command line interface. Git is a version control system that tracks changes in source code during software development. If you don't have these installed, you can download Node.js from the official website and Git from its official website. Once the installation is complete, you can start using Foundation 6's CLI tools.
Installing the CLI tool for Foundation 6 is simple. Open your terminal or command prompt and type the following command: npm install foundation-cli --global. This command tells npm (Node Package Manager) to download and install the Foundation CLI globally so that it can be used in any directory on your computer. Once the installation is complete, you can verify it by typing foundation -v in the terminal. This should show the version of Foundation CLI installed on the system.
To create a new project using the CLI tool of Foundation 6, open a terminal and navigate to the directory where you want to create the project. Then, type the following command: foundation new. This will prompt you to select a template for your project. You can choose from basic templates, advanced templates, or custom templates. After selecting the template, the CLI will use the project's text
Create a new directory and install all necessary dependencies.
The CLI tool for Foundation 6 provides some commands to help you manage your projects. Some of the most commonly used commands include: foundation new (create a new project), foundation watch (start the server and monitor file changes), foundation build (compile the file into a project that can be used for production), and foundation update (replace the project updates the dependencies to the latest version).
To update Foundation 6's CLI tool, you can use the npm update command. Open your terminal and type the following command: npm update -g foundation-cli. This command tells npm to check for updates to foundation-cli global packages and install them when available.
If you need to uninstall Foundation 6's CLI tool, you can use the npm uninstall command. Open your terminal and type the following command: npm uninstall -g foundation-cli. This command tells npm to delete the foundation-cli global package from the system.
Yes, you can use Foundation 6's CLI tools on multiple projects. The CLI is installed globally on the system, which means you can use it in any directory. To create a new project, just navigate to the desired directory and use the foundation new command.
The basic templates in the CLI tool in Foundation 6 provide a simple starting point for the project, requiring only minimal settings. Advanced templates, on the other hand, contain additional tools and configurations for more complex projects. These include the Sass compiler, automatic prefixer, JavaScript connector, and source map generator.
To compile a production project, use the foundation build command. This command compiles your Sass and JavaScript files, compresses your CSS and JavaScript, compresses your images, and copies your HTML files into the dist folder. This folder contains all the files that are available for production for the project.
If you are having problems using Foundation 6's CLI tool, there are some steps you can take to troubleshoot. First, make sure that the latest versions of Node.js and Git are installed on your system. If the problem persists, try updating the CLI with the npm update command. If you are still having problems, you can seek help from the Foundation community on their official forum or on the GitHub page.
The above is the detailed content of Getting Started with Foundation 6's CLI Tools. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
