使用gulp构建前端项目

一、 安装Node

• 访问http://nodejs.org，搭建node环境

二、 gulp的安装

1. 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：npm install -g gulp

2. 把目录切换到你的项目文件夹中：cd <YOUR_PROJECT>

3. 在项目文件夹下创建package.json，记得加上{}，保存。（不加{}会导致安装失败。创建package.json文件亦可直接通过npm init命令，该命令会引导你创建一个package.json文件，包括名称、版本、作者这些信息等）

4. 然后在命令行中执行（加上--save-dev，可在安装的时候把gulp写进项目package.json文件的依赖中）：npm install gulp --save-dev
   这样就完成了gulp的安装。至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：Why do we need to install gulp globally and locally?、What is the point of double install in gulp?。

三、 安装插件

1. 安装常用插件：

• 自动加载package.json文件里的gulp插件 （gulp-load-plugins）

• sass的编译 （gulp-ruby-sass）

• 自动添加css前缀 （gulp-autoprefixer）

• 压缩css （gulp-clean-css）

• Html压缩 （gulp-htmlmin）

• js代码校验 （gulp-jshint）

• 合并js文件 （gulp-concat）

• 压缩js代码 （gulp-uglify）

• 压缩图片 （gulp-imagemin）

• 自动刷新页面 （browser-sync）

• 图片缓存，只有图片替换了才压缩 （gulp-cache）

• 更改提醒 （gulp-notify）

• 清除文件 （del）

1. 安装这些插件需要运行如下命令：
   npm install gulp-load-plugins gulp-ruby-sass gulp-autoprefixer gulp-clean-css gulp-htmlmin gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify browser-sync gulp-cache del --save-dev

四、 项目根目录下新建gulpfile.js和 gulp文件夹

• 文件结构类似于（ tasks文件里存放对应的任务、config.json配置任务的相关配置）

• package.json

• gulpfile.js

• gulp

• └──config.json

• └──tasks

  • └── imageTask.js

  • └── pageTask.js

  • └── styleTask.js

  • └── scriptTask.js

• src

• └──images

• └──pages

• └──scripts

• └──styles

• node_modules

• build
  注：gulpfile.js文件名不可更改

五、 各文件内容

imageTask.js内容：

module.exports = function(gulp, plugin, config, browserSync)
{
    gulp.task('imageTask', function()
    {
        return gulp.src(config.imageFile.src).pipe(plugin.cache(plugin.imagemin({
            optimizationLevel: 3,// png图片优化水平，3是默认值，取值区间0-7
            progressive: true,//是否无损压缩jpg图片
            interlaced: true,//是否隔行扫描gif进行渲染
            multipass: true
            //多次优化svg直到完全优化
    }   ))).pipe(gulp.dest(config.imageFile.dest)).pipe(plugin.notify({
            message: 'Images task complete'
        })).pipe(browserSync.reload({
            stream: true
        }));
    });
};

pageTask.js内容：

module.exports = function(gulp, plugin, config, browserSync)
{
    gulp.task('pageTask', function()
    {
        gulp.src(config.pageFile.src).pipe(plugin.htmlmin({
            collapseWhitespace: true,// 压缩HTML
            minifyJS: true,// 压缩页面JS
            minifyCSS: true
            // 压缩页面CSS
    }   )).pipe(gulp.dest(config.pageFile.dest)).pipe(plugin.notify({
            message: 'Pages task complete'
        })).pipe(browserSync.reload({
            stream: true
        }));
    });
};

scriptTask.js内容

module.exports = function(gulp, plugin, config,browserSync)
{
    gulp.task('scriptTask', function()
    {
        return gulp.src(config.scriptFile.src)
               .pipe(plugin.cache(plugin.jshint()))
               .pipe(plugin.jshint.reporter('default'))// 对代码进行报错提示
              // .pipe(plugin.concat('main.js'))//合并后的文件名
               .pipe(plugin.uglify())
               .pipe(gulp.dest(config.scriptFile.dest))
               .pipe(plugin.notify({
                           message: 'Scripts task complete'
                       }))
               .pipe(browserSync.reload({stream: true}));
      
    });
};

styleTask.js内容

module.exports = function(gulp, plugin, config, browserSync)
{
    gulp.task('styleTask', function()
    {
        return gulp
                   .src(config.styleFile.src)
                       .pipe(plugin.cache(plugin.cleanCss()))
                       .pipe(gulp.dest(config.styleFile.dest))
                       .pipe(plugin.notify({
                           message: 'Styles task complete'
                       }))
                       .pipe(browserSync.reload({
                           stream: true
                       }));
    });
};

config.json内容

{
  "imageFile" : {
    "src" : "src/images/**/*.{jpg,png,gif}",
    "dest" : "build/images"
  },
  "styleFile" : {
    "src" : "src/styles/**/*.css",
    "dest" : "build/styles"
  },
  "scriptFile" : {
    "src" : "src/scripts/**/*.js",
    "dest" : "build/scripts"
  },
  "pageFile" : {
    "src" : "src/pages/**/*.html",
    "dest" : "build/pages"
  }
}

gulpfile.js内容：

var gulp = require('gulp'), // 引入gulp
config = require('./gulp/config.json'), 
browserSync = require('browser-sync').create(), 
gulpLoadPlugins = require('gulp-load-plugins')(),
gulpTaskList = require('fs').readdirSync('./gulp/tasks/');
gulpTaskList.forEach(function(taskfile)
{
    require('./gulp/tasks/' + taskfile)(gulp, gulpLoadPlugins, config, browserSync);
});
gulp.task('serve', ['styleTask', 'scriptTask', 'imageTask', 'pageTask'], function()
{
    browserSync.init({
        files: "build/**/*.*",
        proxy: "localhost:3000/build/pages/index.html"
    });
});
gulp.task('watch', ['serve'], function()
{
    // 检测文件发送变化
    gulp.watch(config.pageFile.src, ["pageTask"]);
    gulp.watch(config.styleFile.src, ["styleTask"]);
    gulp.watch(config.scriptFile.src, ["scriptTask"]);
    gulp.watch(config.imageFile.src, ["imageTask"]);
});
// default 默认任务，依赖清空任务
gulp.task('default', ['watch']);