Gulp的入门

Gulp

Gulp的入门指南:

1. 全局安装gulp

$ npm install –global gulp

根据具体情况添加sudo,建立完了之后,进行初始化

$ npm init

记得命名,且不能为gulp和汉字,初始化之后会出现一个package.json的文件,以后每装一次插件,在该文件的“devDependencies”下面就有改插件的名称和版本号。

2. 作为项目的开发依赖(devDependencies)安装:

$ npm install –save-dev gulp

这里出现一个node_modules的文件夹

3.在项目根目录下创建一个名为gulpfile.js的文件:

写上代码:

var gulp = require(‘gulp’);

gulp.task(‘default’, function() {

    // 将你的默认的任务代码放在这

});

4. 运行gulp:

$ gulp

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
想要单独执行特定的任务(task),把上面的’default’改个名字,如’other’,在输入“$ gulp other”,这样就运行了指定的任务。

5.插件的安装:

npm install –save-dev gulp-concat
npm install –save-dev gulp-jsmin

这里装了两个插件,一个是gulp-concat(代码合并)和gulp-jsmin(js代码压缩)这两个插件,语法是:

Palm Springs commercial photography

  • gulp.src 后面跟的是要压缩的是名为js的文件夹下的所有以.js结尾的文件,这里注意路径问题
  • .pipe(concat(‘new.js’))是合并后的js的名字为new,jsmin和他一样
  • .pipe(gulp.dest(‘new/‘))这是把上面生成的文件放在new这个文件夹下,如果没有该文件夹,系统会自己建立一个
    然后运行
    $ gulp scripts
    这样就生成了你想要的代码

关于task的数组写法

Palm Springs commercial photography
输入:

$ gulp c

执行的顺序是abc注意逗号不要漏写。

package.json的妙用

新建一个空文件夹,里面只放一份package.json

package.json的devDependencies下的插件名为:

Palm Springs commercial photography

在终端运行

$ npm install

然后

Palm Springs commercial photography

在这个文件就下载下来package.json的devDependencies里面的插件

Contents
  1. 1. Gulp
    1. 1.1. Gulp的入门指南:
      1. 1.1.1. 1. 全局安装gulp
        1. 1.1.1.1. 根据具体情况添加sudo,建立完了之后,进行初始化
        2. 1.1.1.2. 记得命名,且不能为gulp和汉字,初始化之后会出现一个package.json的文件,以后每装一次插件,在该文件的“devDependencies”下面就有改插件的名称和版本号。
      2. 1.1.2. 2. 作为项目的开发依赖(devDependencies)安装:
        1. 1.1.2.1. 这里出现一个node_modules的文件夹
      3. 1.1.3. 3.在项目根目录下创建一个名为gulpfile.js的文件:
        1. 1.1.3.1. 写上代码:
      4. 1.1.4. 4. 运行gulp:
        1. 1.1.4.1. 默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
        2. 1.1.4.2. 想要单独执行特定的任务(task),把上面的’default’改个名字,如’other’,在输入“$ gulp other”,这样就运行了指定的任务。
      5. 1.1.5. 5.插件的安装:
        1. 1.1.5.1. 这里装了两个插件,一个是gulp-concat(代码合并)和gulp-jsmin(js代码压缩)这两个插件,语法是:
        2. 1.1.5.2. 然后运行
        3. 1.1.5.3. 这样就生成了你想要的代码
  2. 2. 关于task的数组写法
    1. 2.1. 执行的顺序是abc注意逗号不要漏写。
  3. 3. package.json的妙用
    1. 3.1. 新建一个空文件夹,里面只放一份package.json,
    2. 3.2. package.json的devDependencies下的插件名为:
    3. 3.3. 在终端运行
    4. 3.4. 然后
    5. 3.5. 在这个文件就下载下来package.json的devDependencies里面的插件
,