gulp构建工具

gulp使用步骤

先手动创建项目文件夹

1. 全局安装 gulp：

$ npm install --global gulp

或$ npm install -g gulp (可在项目根目录下操作)

2. 作为项目的开发依赖（devDependencies）安装(本地安装)：

$ npm install --save-dev gulp

或$ npm install gulp (可在项目根目录下操作)

安装完成会生成一个node_modules文件夹

1.在github上新建仓库

2.克隆仓库到本地 $ git clone 地址

3.创建gitignore文件(用来定义哪些文件不用上传) $ gitignore

4.记事本打开gitignore,添加忽略的文件

(node_modules/*

.idea/*

build/*

dist/*)

5.添加到仓库 $ add .

6.提交 $ commit -m'gitignore'

7.发送到远程仓库 $ push

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

创建配置文件 $ touch gulpfile.js

4. 在项目根目录里手动创建src文件夹,然后在src文件夹里手动创建HTML文件和js文件

5. 在gulpfile.js当中定义任务 // 1.引入模块var gulp = require('gulp');// 2.定义路径 src 开发路径 build运行路径 dist发布路径var appPath = { // 提前声明好一些常量 src:'src/', build:'build/', dist:'dist/'};//3.任务清单把所有的src下面的html分别构建到build中和dist中gulp.task('move',function () { // 1.告诉gulp要操作那些文件 gulp.src(appPath.src + '**/*.html') .pipe(gulp.dest(appPath.build)) .pipe(gulp.dest(appPath.dist)); });

4.执行任务 gulp move a.在命令行中执行 b.在webStrom的命令行中执行

5.npm install gulp-less 下载less编译插件

6.npm install gulp-cssmin 下载css压缩插件

7.npm install gulp-concat 下载js合并插件

8.npm install gulp-uglify js压缩插件

9.less编译

10.js压缩

6. 在配置文件定义好任务后要运行,才能复制到build和dist文件上

运行$ gulp 任务名称 (如 $ gulp html ) =>就会自动创建build和dist文件夹,且复制了src文件夹里的文件

7. 运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入  gulp <task> <other task> 。

gulp构建工具

1.安装

• 1.全局安装glup

  // 只需要执行一次
  npm install -g gulp

• 2.查看安装是否完成

  gulp -v

2.任务清单

- src 开发路径
- build 运行路径
- dist 发布路径

• 1.创建gulpfile.js文件

• 2.在gulpfile.js当中定义任务

  // 在引入模块之前需要本地安装 npm install gulp
  // 1.引入模块
  var gulp = require('gulp');
  // 2.定义路径 src 开发路径 build运行路径 dist发布路径
  var appPath = {
      // 提前声明好一些常量
      src:'src/',
      build:'build/',
      dist:'dist/'
  };
  //3.任务清单把所有的src下面的html分别构建到build中和dist中
  gulp.task('move',function () {
      // 1.告诉gulp要操作那些文件
      gulp.src(appPath.src + '**/*.html')
          .pipe(gulp.dest(appPath.build))
          .pipe(gulp.dest(appPath.dist));
  });

ps: dest()代表需要把src里面的文件放入到那个目录下面

• 3.执行任务gulp move a.在命令行中执行 b.在webStrom的命令行中执行

• 4.npm install gulp-less 下载less编译插件

• 5.npm install gulp-cssmin 下载css压缩插件

• 6.npm install gulp-concat 下载js合并插件

• 7.npm install gulp-uglify js压缩插件

• 7.less编译

  // less编译
  gulp.task('less',function () {
  gulp.src(appPath.src + 'style/index.less')
      .pipe(less())
      .pipe(gulp.dest(appPath.build + 'css'))
      .pipe(cssmin())
      .pipe(gulp.dest(appPath.dist + 'css'));
  });

• 8.js压缩

  // js压缩
  gulp.task('js',function () {
     gulp.src(appPath.src + '**/*.js')
         .pipe(concat('index.js'))
         .pipe(gulp.dest(appPath.build + 'js'))
         .pipe(uglify())
         .pipe(gulp.dest(appPath.dist + 'js'));
  });

gulp项目构建

• 1.生成package.json文件npm init -f

• 2.上传的时候不需要上传 node_modules文件夹下的所有文件,但是package.json这个文件必须要,如果别人想要插件只需要执行npm install即可,就会下载所有的相关的插件