gulp的简单使用,如何配置一个可以用html+less/sass写微信小程序/支付宝小程序的项目

    最近看到群里好多人都是讨论关于gulp的配置的问题,今天就用实例分享一下gulp的简单使用方法.

    看群里有人粘出来的代码,里面用到的插件种类繁多,但是看它执行任务的时候,其实需要的仅仅的压缩图片,编译less文件,所以,建议大家在创建之前,首先要明白自己的需求.我们拿今天的实例来说.

   我们知道微信小程序的页面是由,.wxml,.wxss.json,.js.这四部分组成,其实wxml对应的就是html.wxss对应的就是css.然而我们用惯了less/sass了.不想用这种格式开发,就想要html+less/sass.这时候我们需要怎么做?

   首先,我们知道本质上wxml文件其实和html文件是一致的,我们不需要额外的处理,wxss其实就是css,但是我们如果想用less或者sass的话,就需要把它编译成css,.json和.js我们也是不需要处理的,这时候我们明确需求了.

   我们需要一个可以编译less,重命名html.然后把json和js原样转移的一个工具.当然还需要对用到的图片进行压缩,ok,明白需求了,我们就可以编写了.对于gulp的安装的运行相信大家都不陌生了,这里就大致再写一遍   

1. 全局安装 gulp：

$ npm install --global gulp

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

$ npm install --save-dev gulp

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

var gulp = require('gulp'); gulp.task('default', function() {  // 将你的默认的任务代码放在这});

4. 运行 gulp：

$ gulp

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

   好接下来,我们就需要写任务了,写任务之前我们需要先安装我们需要的插件,我们这次需要的插件是,sass转译插件,重命名插件,图片压缩插件还有babel这个是处理js的.

对于安装插件的方法,

npm install 插件名称  --save-dev   

--save-dev可写可不写,他的作用是把你安装的插件同步到package.json里面,如果不写的话,package.json里面没有这个插件的名字,这样如果那的node_modules文件删除了,就需要重新一个个安装了,不能使用npm install直接安装完.

  好了,安装完插件之后,我们开始写服务,我们由简单到复杂,我们先写重命名的服务,对于重命名,我们只需要对wxml和sass进行重命名.

首先介绍一下我的目录结构,app目录是我定义的编写的目录就是用html写的时候的文件夹,build目录是,输出目录,是放入微信开发者工具的代码文件夹.

gulp.task('wxml', function() {
    gulp.src('./app/**/*.html')
        .pipe(rename(function(path) {
            path.extname = '.wxml'
        }))
        .pipe(gulp.dest('build/'))
})

这里我app后面用了两层通配符*,这样的方便之处是,我可以对app里面的文件夹随意命名,这里配置的地方不必跟着做修改.这个的作用就是把他重名之后,放到输入文件夹里面.

然后我们写处理json和js这两个文件是不用做处理,直接就可以放到输出文件夹的,但是对与js我们还是使用babel对他进行一下处理.Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

gulp.task('json', function() {
    gulp.src('./app/**/*.json')
        .pipe(gulp.dest('build'))
})
gulp.task('js', function() {
    gulp.src('./app/**/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('build'))
})

然后我们定义图片的任务

gulp.task('image', function() {
    gulp.src('./app/**/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            interlaced: true, //隔行扫描压缩jqp图片
            optimizationLevel: 5, //0-7
            progressive: true, //无损压缩jpg
            multipass: true //多次优化svg直到最优
        }))
        .pipe(gulp.dest('build'))
})

imagemin里面的参数可以不用写,这个看情况.一般情况是写不写都无所谓的.

然后我们定义转移sass的服务,这里需要两部,首先转移成css然后从命名成wxss

gulp.task('sass', function() {
    gulp.src('./app/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded'
        }))
        .pipe(rename(function(path) {
            path.extname = '.wxss'
        }))
        .pipe(gulp.dest('build'))
})

服务都定义完了,我们就开始调用的,调用服务的方式是gulp +服务名.这时候,我们想,我们一个一个的服务执行是不是很麻烦,我想在执行默认服务的时候让这些自动执行,那我们先这么写

gulp.task('default', ['wxml', 'sass', 'json', 'js', "image"], function() {
  
})

然后,我们现在又有一个需求,这些服务是在我执行gulp的时候才执行的,但是我们想让他自动检测我们文件的变化,然后就马上做出修改,那我们该如何写呢?

我们可以定义一个watch服务,或者直接写在默认服务中这个样子

gulp.task('default', ['wxml', 'sass', 'json', 'js', "image"], function() {
    gulp.watch('./app/**/*.html', ['wxml'])
    gulp.watch('./app/**/*.scss', ['sass'])
    gulp.watch('./app/**/*.json', ['json'])
    gulp.watch('./app/**/*.js', ['js'])
})

ok,这样就完成了,是不是很简单.这里我们并不需构建本地的运行环境,也不需要请求接口,所以我们并不需要gulp-connect-proxy,gulp-connect这两个插件

其实所有配置都大体相同的,大家根据需要自己配置服务,多写多练.支付宝小程序类似.

好了今天先分享这么多,如果有什么说的不对的地方或者大家有更好的办法,欢迎更正补充.在此先谢过各位大神了.  

附整体代码

var gulp = require('gulp')
var sass = require('gulp-sass')
var rename = require('gulp-rename')
var babel = require('gulp-babel')
var imagemin = require('gulp-imagemin');
gulp.task('wxml', function() {
    gulp.src('./app/**/*.html')
        .pipe(rename(function(path) {
            path.extname = '.wxml'
        }))
        .pipe(gulp.dest('build/'))
})
gulp.task('sass', function() {
    gulp.src('./app/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded'
        }))
        .pipe(rename(function(path) {
            path.extname = '.wxss'
        }))
        .pipe(gulp.dest('build'))
})
gulp.task('json', function() {
    gulp.src('./app/**/*.json')
        .pipe(gulp.dest('build'))
})
gulp.task('js', function() {
    gulp.src('./app/**/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('build'))
})
gulp.task('image', function() {
    gulp.src('./app/**/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            interlaced: true, //隔行扫描压缩jqp图片
            optimizationLevel: 5, //0-7
            progressive: true, //无损压缩jpg
            multipass: true //多次优化svg直到最优
        }))
        .pipe(gulp.dest('build'))
})
gulp.task('default', ['wxml', 'sass', 'json', 'js', "image"], function() {
    gulp.watch('./app/**/*.html', ['wxml'])
    gulp.watch('./app/**/*.scss', ['sass'])
    gulp.watch('./app/**/*.json', ['json'])
    gulp.watch('./app/**/*.js', ['js'])
})