本地环境下，静态网站的构建自动化

vim编辑器工作以来使用了两年多，早已熟悉每一个命令。工作之余，打算在本地制作一个线下网站环境。所以我想到了在本地构建关系，并通过gulp打包输出。

目录设计如下：

整个过程是：安装nodejs，全局安装gulp，项目安装gulp以及gulp插件，配置gulpfile.js，运行任务

全局安装gulp插件

$ npm install gulp -g

本地路径

创建模块，package.json 文件是必不可少的。我们可以使用 NPM 生成 package.json 文件，生成的文件包含了基本的结果.

$ npm init

本地安装gulp插件

$ npm install gulp gulp-less gulp-uglify imagemin-pngcrush
 gulp-imagemin gulp-html-extend —save-dev     //对less的输出，js的压缩，图片压缩，html的处理

全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件功能

$ vim gulp.js

修改gulp.js文件

var gulp = require('gulp'),
less = require('gulp-less'),
uglify = require('gulp-uglify'),              
imagemin = require('gulp-imagemin'),//图片压缩
pngcrush = require('imagemin-pngcrush'),
htmlHelper = require('gulp-html-extend');    //主要处理公用部分layout

var dir = '../event/';   //定义目录


gulp.task('testLess', function() {
    gulp.src(dir+'web/*/*/*.less')
    .pipe(less())
    .pipe(gulp.dest(dir+'output'));
    console.log('done css');
})

gulp.task('minify-js', function() {
    gulp.src(dir+'web/*/*/*.js')
  //.pipe(uglify())   //开发环境下不压缩js
    .pipe(gulp.dest(dir+'output'));
})

gulp.task('img', function() {
      return gulp.src(dir+'web/*/images/*')
    .pipe(imagemin({
    progressive: true,
    svgoPlugins: [{removeViewBox: false}],
      use: [pngcrush()]
    }))
 .pipe(gulp.dest(dir+'output'));
});

gulp.task('testHtml', function() {
    gulp.src(dir+'web/*/*.html').pipe(htmlHelper({
    annotations:false,verbose:false
    })).pipe(gulp.dest(dir+'output'))
})


gulp.task('default', function() {
     gulp.run('testLess','minify-js','testHtml','img');
     gulp.watch(dir+'web/*/*/*.less',['testLess'])
     gulp.watch(dir+'web/*/*/*.js',['minify-js'])
     gulp.watch(dir+'web/*/*.html',['testHtml'])
     gulp.watch(dir+'web/*/images/*',['img'])
})

使用gulp命令运行打包程序

$ gulp

layout.html 使用了bootstrap框架

页面引用(注意使用output路径,按需引入资源)

源码查看