NPM Scripts

Loading...

来自 The Hong Kong University of Science and Technology 的课程

Front-End Web UI Frameworks and Tools: Bootstrap 4

1574 个评分

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1574 个评分

课程 1（共 4 门，Specialization Full-Stack Web Development with React）

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

从本节课中

Web Tools

This module rounds out our discussions on Bootstrap JavaScript components. Then we discuss CSS preprocessors, Less and Sass. Finally, we discuss building and deployment of our Web projects through task automation using NPM scripts, and task runners like Grunt and Gulp. The final assignment of this course needs to be completed at the end of this module.

Building and Deployment10:10

NPM Scripts4:07

Exercise (Video): NPM Scripts Part 112:47

Exercise (Video): NPM Scripts Part 228:50

与讲师见面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

As a first approach to automating our tasks,

let's look at the example of using NPM scripts.

Indeed, we had already started using NPM scripts in this course in the earlier lessons.

Let's quickly revisit our package.json file to see how we have used a couple of

NPM scripts in our package.json file to automate a couple of tasks.

Taking a look at our package.json file,

you see that in the package.json file,

we had this JSON object called scripts.

Inside the scripts, we had this property called start that we defined here which we

specified as NPM run lite and also we specified this lite as lite-server.

So, then you start up your web development.

We also started up our lite-server by typing on NPM start at the prompt.

Now, what this enabled us is to start up the lite-server in

our project directory and start saving up the files from the directory,

so that we can view it in a browser.

We found this to be a useful approach to be able to watch live

the changes that we make to our files being reflected immediately in the browser.

Now, in other tasks that we configured and used in the previous lesson was SCSS,

which is used for transforming the SCSS code into the corresponding CSS code.

So, we wrote this quote unquote NPM script called as SCSS which executed the node sass

by looking for the SCSS files

in the CSS folder and then transforming them into the corresponding CSS code.

And to execute this,

we typed NPM run SCSS at the command prompt.

So, we've already see that we have used a couple of

NPM scripts to automate some tasks during our web development.

So to summarize, NPM scripts are supported through

this scripts property in the package.json file as we have seen in the example earlier.

There are several scripts that are supported.

One in particular that is of interest to us is the start-script,

so that you can add the prompt type NPM start,

and then the corresponding script referred to by the start, will be started.

Now, we can define arbitrary scripts in

the scripts property and then run them by saying NPM run and the name of the script,

as you saw the use of NPM run SCSS or NPM run lite and so on.

We are going to leverage this to be able to develop a few additional scripts that will

automate a lot of those tasks that we talked about in the previous lecture.

So, to help us understand how we can leverage NPM scripts to

automate a lot of our web development tasks,

we will learn how to configure the NPM scripts in the package.json file,

and then execute the scripts,

sometimes automatically or sometimes manually invoke

the scripts in order to do the building and deployment of our website.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取