gulp使用流程及注意事项

运行准备： 需要node环境及git

1. 全局安装gulp，命令：
   npm install gulp -g

---

2. cd到项目根目录-本地安装gulp，命令：
   npm install gulp
   此时目录会生成node_modules文件夹，可使用gulp -v查看是否安装成功

---

3. 创建packpage.json文件，命令：
   npm init -y
   在目录会自动生成package.json文件，如下：

    npm{
      "name": "demo",  //项目名称
      "version": "1.0.0",  //项目版本
      "description": "",   //项目描述
      "main": "index.js",  
      "dependencies": {
        "gulp": "^3.9.1"
      },
      "devDependencies": {},  //项目依赖的插件
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"  //项目许可协议
    }
    `需要注意的是json文件内不能写注释`
   

---

4. 安装所需插件
   npm install --save-dev [插件名称]如：
   npm install --save-dev gulp-htmlmin（压缩html插件）
   --save-dev是将插件保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点
   安装成功后package.json的devDependencies节点会显示插件版本号，如图：
   

---

5. 配置gulp文件
   在根目录手动创建普通的js后缀文件gulpfile.js，如下图：
   gulp配置简易图

---

6. 在git运行gulp，命令：
   gulp html
   就会将压缩好的html文件输出道设定的dist文件夹下。

---

多个gulp任务

gulp每种任务都要安装对应的插件，配置信息如下：

/* gulp配置文件 */


var gulp = require('gulp');  //在本地引入gulp


//引入组件
var htmlmin = require('gulp-htmlmin'); //压缩html
var minifycss = require('gulp-minify-css');//压缩css
var uglify = require('gulp-uglify');  //压缩js
var concat = require('gulp-concat');    //合并文件
var image = require('gulp-image');   //压缩图片


//执行任务
gulp.task('html',function(){
    gulp.src('*.html')  
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'))
})

gulp.task('css',function(){
    gulp.src('src/**/*.css')  //这里是指src目录下所有的css后缀文件
    .pipe(concat('all.css'))    //合并文件
    .pipe(minifycss())           //压缩css
    .pipe(gulp.dest('dist'))
})

gulp.task('js',function(){
    gulp.src('src/js/*.js')  
    .pipe(concat('all.js'))   
    .pipe(uglify())    
    .pipe(gulp.dest('dist'))
})

gulp.task('img',function(){
    gulp.src('src/image/*')         //压缩图片路径
    .pipe(image())               //压缩图片
    .pipe(gulp.dest('dist/image'))  //压缩图片输出路径
});

gulp.task('build',['html','css','js','img'])  //运行所有任务

这样配置在git输入gulp build就能自动执行所有的任务，记得执行前安装任务所需要的插件。插件用法可以在npm官网文档里找到demo

---

小技巧

将带有插件版本号的package.json放入根目录在git执行 npm install便可以将所需要的插件一次性下载到本地项目。

---

• 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处