微信小程序之代碼構建初探：如何繼續使用html與css開發小程序

微信小程序彷佛會給互聯網帶來一場非比尋常的變革。隨處可見關於小程序的文章也讓咱們感覺到它正在颳起一陣風暴，因此呢，抽空研究研究它，仍是很是有必要的，加上最近小程序公測，經過註冊未認證的小程序，咱們能夠獲得一個appid，下載最新的開發工具，就能夠開始嘗試編寫一些demo了。

可是在開發小程序的時候，因爲咱們比較經常使用的編輯器對於.wxml, .wxss後綴的文件並無多少支持，目前我所知道的，除了vs code有一個叫作vs wxml的插件以外，幾乎沒有其餘插件了，所以，沒有代碼補全，沒有emmet支持，沒有代碼高亮，這極大的影響了開發效率，我也知道有不少來嘗試小程序開發的同窗爲此而很是困擾。

好在，辦法老是有的。

你們都知道大多數編輯器對於html與css的支持很是全面完善，特別是emmet插件，對於html和css來講，已經變得必不可少了。而微信的wxml與wxss其實與html與css差異並不大。所以，咱們只須要在開發時，將代碼寫在html與css中，在保存時，經過構建工具，將文件的後綴名改爲.wxml與.wxss便可。這樣一來，咱們就不用在內置工具中開發，不用處處找對於小程序支持良好的IDE，也不用等各位大佬出新的插件了，就用咱們各自最喜歡最熟悉的編輯器就能夠。下面我以我最熟悉的gulp爲例，與你們分享一下具體如何實現。

準備

咱們知道小程序的頁面都在pages文件夾下，首先建立一個demo文件夾，這裏將會放置咱們的新頁面，並在demo文件夾裏建立一個dev文件夾，用於存放html與css文件，大概的目錄結構以下

// + 表示文件夾   - 表示文件
+ pages
  + demo
    + dev
      + html
        - demo.html
        - demo2.html
      + styles
        - demo.scss
        - _reset.scss
        - _libs.scss
      + scripts
        - demo.js複製代碼

由於在平時開發中，經常將scss編譯爲css使用，所以這裏咱們也用scss來進行開發

編譯以後，獲得的結構大約以下

+ pages
  + demo
    + dev
    - demo.wxml
    - demo.wxss
    - demo.js
    - gulpfile.js複製代碼

咱們的目的，就是將dev中的html，js，scss，經過gulp，編譯成爲小程序可以支持的wxml，js與wxss，在清楚了目的以後，咱們就來添加gulp任務就好了。

首先在gulpfile.js中定義一個路徑對象，以方便後續的使用

// 設置相關路徑
var paths = {
    wxml: 'html',
    wxss: 'styles',
    js: 'scripts',
    img: 'images'
};複製代碼

具體要使用那些gulp插件，你們在使用的時候根據提示安裝便可，由於是根據以前的老文件修改，比較懶沒有去區分具體使用了那些插件，見諒。

HTML

對於html的處理比較簡單，只有2個操做，修改後綴名與在你但願的位置生成新的wxml文件

gulp.task('wxml', function() {
    var src = [paths.wxml + '/**/*.html'];
    return gulp.src(src)
        .pipe(plumber({
            errorHandler: handleError
        }))
        .pipe(foreach(function(stream, file) {
            return stream.pipe(rename(file.relative.replace(/\.html/gi, '.wxml')));
        }))
        .pipe(gulp.dest('../'))
        .pipe(notify({
            onLast: true,
            message: "transform wxml success!"
        }));
});複製代碼

JS

js就更簡單了，因爲開發工具本身內置了編譯方式，咱們只須要按照commonJs的方式處理本身的代碼就行，不須要進行額外的處理，可是爲了統一，也將開發代碼放在dev文件中，編譯時在你想要的位置從新生成便可

gulp.task('wxjs', function() {
    var src = [paths.js + '/**/*.js'];
    return gulp.src(src)
        .pipe(plumber({
            errorHandler: handleError
        }))
        .pipe(gulp.dest('../'))
        .pipe(notify({
            onLast: true,
            message: "transform wxjs success!"
        }))
});複製代碼

SCSS

對於scss的處理工做稍微要多一點，咱們的主要目的是要繼續使用scss的語法與特性，並最終編譯成.wxss文件

gulp.task('wxss', function() {
    var src = [paths.wxss + '/**/*!(_).scss'];
    return gulp.src(src)
        .pipe(plumber({
            errorHandler: handleError
        }))
        .pipe(foreach(function(stream, file) {
            return stream
                .pipe(path.extname(file.relative) == '.less' ? less() : sass().on('error', sass.logError));
        }))
        .pipe(csscomb())
        .pipe(minifycss({
            aggressiveMerging: false,
            advanced: false,
            compatibility: 'ie7',
            keepBreaks: true
        }))
        .pipe(cssbeautify({
            autosemicolon: true
        }))
        .pipe(foreach(function(stream, file) {
            return stream.pipe(rename(file.relative.replace(/\.css/gi, '.wxss')));
        }))
        .pipe(gulp.dest('../'))
        .pipe(notify({
            onLast: true,
            message: "browser reload for css"
        }));
});複製代碼

ok，這樣就大功告成了，熟悉gulp的同窗能夠動手嘗試一下了，熟悉其餘構建工具的同窗也能夠根據我提供的思路實現一樣的效果。想來也是不難的。固然，這只是代碼構建的一些小的嘗試，當面臨具體項目時，還須要更多更嚴謹的考慮才行。

完整代碼

'use strict';

var rf = require("fs");
var path = require("path");
var through = require("through2");
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var gutil = require('gulp-util');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var cssbeautify = require('gulp-cssbeautify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
var header = require('gulp-header');
var footer = require('gulp-footer');
var livereload = require('gulp-livereload');
var watch = require('gulp-watch');
var imgcache = require('gulp-imgcache');
var notify = require("gulp-notify");
var foreach = require("gulp-foreach");
var sass = require("gulp-sass");
var sort = require('gulp-sort');
var replace = require('gulp-replace');

// 圖像處理
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var spritesmith = require('gulp.spritesmith');

//錯誤捕獲
var plumber = require('gulp-plumber');

// 設置相關路徑
var paths = {
    wxml: 'html',
    wxss: 'styles',
    js: 'scripts',
    img: 'images'
};

gulp.task('wxml', function() {
    var src = [paths.wxml + '/**/*.html'];
    return gulp.src(src)
        .pipe(plumber({
            errorHandler: handleError
        }))
        .pipe(foreach(function(stream, file) {
            return stream.pipe(rename(file.relative.replace(/\.html/gi, '.wxml')));
        }))
        .pipe(gulp.dest('../'))
        .pipe(notify({
            onLast: true,
            message: "transform wxml success!"
        }));
});

gulp.task('wxjs', function() {
    var src = [paths.js + '/**/*.js'];
    return gulp.src(src)
        .pipe(plumber({
            errorHandler: handleError
        }))
        .pipe(gulp.dest('../'))
        .pipe(notify({
            onLast: true,
            message: "transform wxjs success!"
        }))
});

gulp.task('wxss', function() {
    var src = [paths.wxss + '/**/*!(_).scss'];
    return gulp.src(src)
        .pipe(plumber({
            errorHandler: handleError
        }))
        .pipe(foreach(function(stream, file) {
            return stream
                .pipe(path.extname(file.relative) == '.less' ? less() : sass().on('error', sass.logError));
        }))
        .pipe(csscomb())
        .pipe(minifycss({
            aggressiveMerging: false,
            advanced: false,
            compatibility: 'ie7',
            keepBreaks: true
        }))
        .pipe(cssbeautify({
            autosemicolon: true
        }))
        .pipe(foreach(function(stream, file) {
            return stream.pipe(rename(file.relative.replace(/\.css/gi, '.wxss')));
        }))
        .pipe(gulp.dest('../'))
        .pipe(notify({
            onLast: true,
            message: "browser reload for css"
        }));
});

gulp.task('watch', function() { //監聽文件改變觸發相應任務
    gulp.watch([paths.wxml + '/**/*.html'], ['wxml']);
    gulp.watch([paths.js + '/**/*.js'], ['wxjs']);
    gulp.watch([paths.wxss + '/**/*.scss'], ['wxss']);
});

gulp.task('default', ['watch']);

function handleError(err) {
    gutil.beep();
    gutil.log(err.toString());
    notify.onError("Error: <%= error.message="" %="">"
  
  
  

 )(err);
    this.emit('end');
}複製代碼

代碼會有冗餘的部分沒有仔細刪除，忽略便可。使用時須要根據提示安裝必要的插件

關於微信小程序，若是基礎不錯的同窗，能夠去積極嘗試一下的，感受官方文檔寫的很清晰，模塊化經驗比較豐富的應該會很容易上手。對於基礎比較薄弱的同窗保持關注也是很是必要的，抓緊時間掌握基礎纔是關鍵啊。

由於小程序你們都處於學習階段，因此你們都在探索嘛，但願你們多多發文章，相互交流學習，一塊兒進步^_^。最近我也會持續更新本身在學習中的收穫與一些實踐demo，歡迎關注個人公衆號，一塊兒交流。