美学原理gulp安装及利用流程

1. 安装nodejs

  • 去 https://nodejs.org/en/下载安装文件安装即可。

  • 设置达成后,在终端输入node -v回车打字与印刷出nodejs的本子号,表达nodejs安装成功。

  • 在终极输入npm -v
    回车打字与印刷出npm的本子号,表明npm也设置成功(node安装包中已融为一炉了npm,由此在安装nodejs的还要也设置了npm)。

  • 那边推荐用nvm安装。附上链接地址
    http://www.cnblogs.com/yesyes/p/7403184.html

2. 设置npm

由于https://www.npmjs.com在境内访问不安宁,由此建议使用国内镜向站点https://npm.taobao.org
具体方法如下:

其一在windows下找到了npmrc。 mac下权且还没找到。

3. 安装gulp(全局)

  • 在巅峰输入npm install gulp -g

  • 设置到位后,同样输入gulp -v出口相应的版本号,则注解安装成功。

从那之后gulp安装到位


4. 铺排项目

下边以一个简易案例来做示范:创1个gulp文件夹作为项目根目录,项目布局如下:!
美学原理 1
咱俩以常用的 gulp-uglify、gulp-concat、gulp-minify-css为例。
第贰配置package.json文件,有两种格局:

  • 能够用记事本之类的创始三个

  • 用npm init建

  • 也得以复制之前项指标创办好的package.json

作者们用npm init 的不二法门来创建package.json
在极限将当前目录切换至项目所在目录,然后输入npm init,一路回车,最后在项目根目录下生成package.json:

{
  "name": "gulp_test", /*项目名,切记这里命名不要与模块一样,如命名为gulp,要地安装gulp时就会出错*/
  "version": "1.0.0", /*版本号*/
  "description": "", /*描述*/
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "", /*作者*/
  "license": "ISC" /*项目许可协议*/
}

诠释是本身要好加的,npm
init生成是未曾注释的,而且json文件也不扶助注释,那点得注意!

5. 地点安装gulp及gulp插件

本地安装gulp

npm install gulp --save-dev

设置到位后,大家再看项目中的变化:
如图:

  1. gulp模块下载到项目中的node_modules文件夹中。

  2. package.json中写入了devDependencies字段,并在该字段下填充了gulp模块名

–svae-dev 的功效正是将刚刚安装的模块写入package.json中。

美学原理 2

世家大概会以为多少奇怪,刚不是设置了gulp吗?对,那是全局安装,为的是能在端终运维gulp义务的,那里是项目级其他装置,真正的gulp模块安装到花色的node_modules/下了,前面包车型大巴插件都是依赖gulp模块的。

当地安装gulp插件

接下去安装上面提到的四个插件,在终极中输入
npm install --save-dev gulp-uglify gulp-concat gulp-minify-css
设置到位,如下图

美学原理 3

6. 创建gulpfile.js文件

在品种根目录下创办gulpfile.js文件,然后编写如下代码,那一个代码没什么好解释的,具体能够参照gulp的api

/*引入gulp及相关插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//压缩
gulp.task('minify-css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css/'));
});
//
gulp.task('script', function () {
    gulp.src(['src/a.js',"src/b.js"])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
gulp.task('default',['minify-css','script']); 

实际的连串必将没这么简单,想想我们一般不容许对某多少个公文操作,应该是对一批文件操作,这样的涉嫌到文件匹配的标题了,临时不实行了。

7. 运行gulp

能够看到,大家在gulpfile.js成立了叁个职责,其实是三个,最终二个是统一上边多少个职分。
下一场我们就足以在终端来运转方面包车型大巴作务了,在巅峰输入

gulp minify-css

运行结果如下图:在dist/css/目录下生成了大家减弱后的css文件。
美学原理 4

8. 用webStrom运行

到如今为至,大家基本精晓gulp在项目中的运用了,只少基本流程是没难点了。但是,时刻使用极限依然某些方便的,上面大家直接在webStrom中运作方面的gulp任务。
在webStrom中开拓gulpfile.js文件 》右键选用 Show 居尔p Tasks
》居尔p面板上业已列出gulpfile.js创设的职务 》选中职务运行即可。
是否相当有利!

美学原理 5

 

小结

仿五指橘续不少,其实没几步,我们是从零开如说起的要害是为着演示整个经过驾驭里面包车型地铁法则,对于一般用户来说,nodejs
npm应该早装好了。
骨子里大家器重要求做的如下:

  1. 开创package.json,上边大家应用的 npm
    init方法,实操中我们一般是把从前创设好的package.json直接拿过来,放到项目根目录下,然后
    npm install 一下,那样我们要用到的gulp插件自动就设置好了。

  2. 编纂gulpfile.js,gulp就那个api,大家常用到的或是就这二个插件,所以大家完全能够编写二个gulpfile.js然后在此基础上改动一下就行了。