Gulp Succinctly: 学习Node.js与Gulp的实战指南

需积分: 9 121 浏览量更新于2024-07-17 收藏 4.25MB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

资源详情

资源推荐

Figure 3: Showing the versions of node.js, npm, and Gulp CLI

How to install plugins

The steps you had to take in the former paragraph only need to be performed once per

machine. Plugins, however, you will need to install for each project you are working on.

Depending on which tools you use, things might be automated for you. In that case, check the

documentation of the tool you are making use of.

If you are simply using a text editor and a terminal window like the first chapters in this book,

you can follow these steps:

1. Create a folder where you want to make your application

2. Open that folder and type in npm init. This will create a package.json file after you

have gone through all of the setup steps. During the setup, you can either fill in every

line, or you can quickly step through it by pressing the Enter key for every question and

answering Yes at the end.

3. You can now install Gulp and Gulp plugins via the command:

a. npm install gulp --save-dev

b. npm install gulp-less --save-dev (to install the Gulp plugin gulp-less, for

example)

Tip: When you know the plugins up front, you can also make this one statement,

like npm install gulp gulp-less gulp-coffeescript --save-dev to install all three modules at

once.

Tip: If you found sample code and notice a lot of entries in the package.json file,

you can simply retrieve them all by typing npm install --save-dev, which will in turn

look up the packages and restore them locally.

gulpfile.js

gulpfile.js is where you’ll spend your time writing your tasks on a per-project basis. It is the

standard file for Gulp to look into what to do. You can create it with your favorite text editor.

For this book, you can either obtain the code from GitHub, or even better, type in the code

yourself in your favorite editor and learn by doing.

Create a folder where you want to keep the code, and create a subfolder in it called Chapter 2.

Create a new file called gulpfile.js and have it opened in a text editor of your choice.

gulpfile.js is always placed in the root folder of your project. As such, the commands mentioned

for the terminal windows or DOS box are meant to be run from the root of that same project root

folder. Further in the book, I took the privilege to put the start files, like less, sass, and

coffeescript under an Assets subfolder. I’ll also state where to put the listings from the current

subfolder position. It’s up to you to decide where you want to put it on your local hard drive

(likely some temp or code folder). The place for code listings will be written like

/Assets/colors.less or /gulpfile.js, for example, where / stands for the subfolder you started to

test out the code. For example: c:\code\chapter2\defaulttask\.

Default task

Ok, you’re ready for your first task. Or better, the default task. This is the task that will run when

you execute the gulp command without specifying which task should be run. Be sure to have

your environment set up to be able to use Gulp. Please refer to Appendix A.

In an Assets subfolder, create two new files, which will contain the following:

Code Listing 3: CodeFolder/Assets/Colors.less

@color:#b6ff00;

@backcolor:#808080;

剩余93页未读，继续阅读

givemepower8

粉丝: 0
资源: 4

Gulp Succinctly: 学习Node.js与Gulp的实战指南

命令行无法安装gulp时用到的文件

gulp入门.pdf

gulp打包项目，css、js自动添加版本号，防止缓存，代理

PS D:\gulp\gulp> gulp aaa gulp : 无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写， 如果包括路径，请确保路径正确，然后再试一次。 所在位置 行:1 字符: 1

gulp修改服务器端口,2.用gulp建立一个服务器

如何删除全局安装的gulp再去安装指定版本的gulp

gulp打包build模块配置

gulp no gulpfile found

帮我写个gulp使用gulp-ref，并过滤指定js

gulp-sass插件怎么使用？

gulp.task("watch",function(){ gulp.watch("./*.html",["copy-html"]); gulp.watch("./*.js",["copy-js"]); gulp.watch("./*.php",["copy-php"]); gulp.watch("./*.css",["copy-css"]); });

使用 Gulp 压缩 图片和js

gulp创建的服务器怎么访问文件,使用gulp设置本地网络服务器

请写出用使用gulp插件gulp-concat 合并a.js和b.js的代码

前端自动化工具gulp怎样

npm run gulp

gulp concat

Cannot find module gulp-preprocess

gulp browser-sync 配置项目

Error: Cannot find module 'gulp-uglify

最新资源

PS D:\gulp\gulp> gulp aaa gulp : 无法将“gulp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。所在位置行:1 字符: 1

gulp.task("watch",function(){ gulp.watch("./.html",["copy-html"]); gulp.watch("./.js",["copy-js"]); gulp.watch("./.php",["copy-php"]); gulp.watch("./.css",["copy-css"]); });

使用 Gulp 压缩图片和js