Setting Bootstrap/sass/bower/gulp (Windows platform)

Please note: You will need to install git before you step into this git installation tutorial.

Objective

To date, almost everyone is talking about bootstrap, less or sass. We know that they are newer front-end technologies, and there are trends that are starting to get more popular, but how do you use them?

Imagine that we now have a new case to use to bootstrap, but we also want to make some changes, what should we do?

Let's pretend you already know what Bootstrap and SASS are, but we don't know where to start, and this teaching will teach you how to set up some help tools for your case.

1. Install node. js

If you don't know what node. js is, please refer to http://nodejs.org/, basically you'll need to install node. js to install Gulp and bower. To install node. js, you should simply download and install the MSI file to http://nodejs.org/download/for the operating system that you use to load the installation kit.
After completing the installation, open your command prompt character (cmd.exe) and enter ' node-v ' you should see this screen:

If you see the ' specified name is not recognized as an internal or external command, a program that can be executed, or a batch file. ' (' node ' is not a recognized as an internal or external command ...), and there's a way to resolve it.

2. Installation SASS

Before you start using Sass, you will need to install Ruby, the quickest way is to install it on your Windows computer using the Ruby Installation Kit, a quick install kit that can easily be quickly installed with a mouse click down. This installation will also install the Ruby command commandline app to let you use Ruby library.

Once you've successfully installed Ruby, you can open the command prompt and enter ' gem install sass ':

3. Installation Bower (not required)

Bower is a suite management program that can help you download a lot of packages like jQuery or bootstrap from Git, and it can help you update the kit easily, and you can find more information in http://bower.io/

Installation Bower as simple as opening the command prompt and then entering:
npm install -g bower
(Note that you need to install node. js and git before you install bower)

4. Download the bootstrap

Once you have installed the bower, you can easily use the command prompt to download bootstrap (I love to play Command:)), if you are not installed Bower also does not matter, you can go to http://getbootstrap.com/getting-started /#download Download, make sure you're downloading the Sass version, because we're going to use Sass.

To use Bower download, open the command prompt and enter the project record, for example: "C:\sites\test\trunk\wp-content\themes\vantage", and then enter:
bower search bootstrap
Basically, Bower will search for all the packages in the GIT software repository that have ' bootstrap ', because Bootstrap has a lot of related packages and you get a long search result, and we're looking for ' bootstrap-sass-official '.

Command prompt character input:
bower install bootstrap-sass-official
You probably noticed that it also helped you download the jquery suite, because Bootstrap's JavaScript must rely on jquery. But if you're starting a WordPress case, you don't need to use the jquery that it helped you with, because WordPress itself is already built into jquery.

5. Install/Set Gulp

Now that we've installed a lot of gadgets, gulp can help us connect the gadgets together. Getting Started with Gulp is a very good teaching, it can teach you how to install a good Gulp. Now you are opening the command prompt, and you are still under your project (mine is "C:\sites\test\trunk\wp-content\themes\vantage").

Establish Package.json

At the command prompt, enter:
npm init
This will set up the Package.json file to provide information about our case, and also help manage our dependent packages. It will ask you about the name, version, and other questions, just enter the relevant content, and then press input.

Global Installation Gulp

At the command prompt, enter:
npm install -g gulp
This will install the gulp, and the coming case no longer needs to be installed again

Local Installation Gulp

At the command prompt, enter:
npm install --save-dev gulp

6. Try it.

Now that we want to use Gulp to help us use the bootstrap scss, first we need to install the following:

At the command prompt, enter:
npm install gulp-sass --save-dev
Now that the outfit is installed, let's look at what Gulp and sass can do for us. Under the project, I have established a scss name to store my sass or scss files, and I have also established a file called Gulpfile.js content as follows:

<textarea class="crayon-plain print-no" style="-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; z-index: 0; opacity: 0; overflow: hidden;" readonly="" data-settings="dblclick">//include Gulpvar Gulp = require (' gulp ');//include external var sass = require (' Gulp-sass ');//Edit sassgulp.task (' sass ', fun Ction () {return gulp.src (' scss/*.scss '). Pipe (Sass ()). Pipe (Gulp.dest (' CSS '));}); **sass work will be translated into any of the scss/under the catalogue. Sass, and css/the file. css files **///Watch Files for Changesgulp.task (' Watch ', function () {gulp.watch (' scss/*.scss ', [ ' Sass ');}); /preset work gulp.task (' Default ', [' sass ']);</textarea>

12345678910111213141516171819

//Include Gulpvar gulp = require(' Gulp '); //Include outsidevar sass = require(' Gulp-sass '); //Edit SassGulp. Task(' sass ', function() { return Gulp. SRC(' scss/*.scss ')     . Pipe(sass())     . Pipe(gulp. Dest(' CSS ')); });/**sass Work will be translated into any of the scss/under the catalogue. Sass files, and css/the files. css files**///Watch Files for changesGulp. Task(' watch ', function() { Gulp. Watch(' scss/*.scss ', [' sass ']); });//Preset workGulp. Task(' default ', [' sass ']);

In order to do the test, I created a test.scss file in Scss, which is as follows. Please note that I have been bower from the bootstrap to the SCSS, so if you are not using bower, you can change the path to your bootstrap file.

<textarea class="crayon-plain print-no" style="-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; z-index: 0; opacity: 0; overflow: hidden;" readonly="" data-settings="dblclick">@import '. /bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap '; NAV {ul {margin:0; padding:0; List-style:none; } li {display:inline-block;} a {display:block; PADDING:6PX 12px; Text-decoration:none; }}.myscss {@extend. col-sm-1; border-color:red;}</textarea>

123456789101112131415161718

@Import '. /bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap '; nav { ul { margin: 0; padding: 0; list-style: none;   } Li { display: Inline-block; } a { display: block; padding: 6px 12px; text-decoration: none;   }}. myscss { @extend . Col-sm-1; Border-color: red; }

Now in the command prompt, enter: ' Gulp ' to perform your preset work, or ' gulp sass ' to perform a specific job, which is actually the same as our current situation, in the preset work list only one job needs to be done.
gulp
You should see

Now, if we go to CSS, we should see that TEST.CSS has been built, and bootstrap and our custom style are in it.

Reprint: http://www.innovext.com/tw/2014/07/11/%E8%A8%AD%E5%AE%9A-bootstrapsassbowergulp-windows%E5%B9%B3%E5%8F%B0/

Setting Bootstrap/sass/bower/gulp (Windows platform)