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 的文件：

创建配置文件 $ touchgulpfile.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> <othertask>。

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即可,就会下载所有的相关的插件