美学原理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

  • 设置npm


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

  • 通过config命令

    npm config set
    registry https://registry.npm.taobao.org

  • 命令行指定

    npm
    –registry https://registry.npm.taobao.org info
    underscore

  • 编写 npmrc文件,在拖欠公文被进入registry
    = https://registry.npm.taobao.org

其一以windows下找到了npmrc。 mac下小还尚未找到。

3. 安装gulp(全局)

  • 当巅峰输入npm install gulp -g

  • 安完成后,同样输入gulp -v出口相应的版本号,则证明安装成功。

由来gulp安装完成


4. 配备项目

脚坐一个简单易行案例来举行示范:创一个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创建了3个任务,其实是鲜单,最后一个凡统一者两只任务。
下一场我们便足以以终极来运行方面的作务了,在终点输入

gulp minify-css

运转结果使下图:在dist/css/目录下生成了俺们减后底css文件。
美学原理 4

8. 用webStrom运行

至当前吧到,大家基本掌握gulp在列蒙之动了,只少基本流程是没问题了。但是,时刻以终端还是有点好的,下面我们一直当webStrom中运作方面的gulp任务。
在webStrom中开辟gulpfile.js文件 》右键选择 Show Gulp Tasks
》Gulp面板上就排有gulpfile.js创建的任务 》选中任务运行即可。
大凡不是美学原理杀有益!

美学原理 5

 

小结

类似手续多,其实没几步,我们是打零开如说打底最主要是为了演示整个过程理解里面的法则,对于一般用户来说,nodejs
npm应该早装好了。
实则我们主要要举行的如下:

  1. 创造package.json,上面我们运用的 npm
    init方法,实际操作中我们一般是管前面创建好之package.json直接将过来,放到项目根目录下,然后
    npm install 一下,这样咱们只要用到之gulp插件自动就安装好了。

  2. 编gulpfile.js,gulp就那几api,我们经常因此到之也许就是那些插件,所以我们全然可编制一个gulpfile.js然后以这基础及修改一下即使实行了。