一二三四日韩精品,性天堂国产精品视频

1. 安裝nodejs

操作

前往nodejs官網(wǎng)，點擊下載安裝包。

858643846-57dfba80aa8af_articlex.png

下載下來是一個鏡像文件，點擊安裝即可。

怎樣檢測nodejs是否安裝成功？

快捷鍵 win+r 打開DOS命令窗口, 敲入 node -v ，輸出node的版本號，即為安裝成功。

2691612478-57dfbb89c9b0d_articlex.png

2. 全局安裝cnpm

操作

DOS窗口任意目錄下，敲入npm install cnpm -g --registry=https://registry.npm.taobao.org
回車，開始安裝cnpm

怎樣檢測cnpm是否安裝成功？

DOS窗口任意目錄下，敲入cnpm -v，輸出cnpm的版本號，即為安裝成功。

3916931146-57dfbe18eb552_articlex.png

3. 全局安裝gulp

操作

DOS窗口任意目錄下，敲入cnpm install gulp -g
回車，開始安裝gulp

怎樣檢測gulp是否安裝成功？

DOS窗口任意目錄下，敲入gulp -v，輸出gulp的版本號，即為安裝成功。

Paste_Image.png

4. 為項目安裝cnpm

DOS命令到項目的根目錄，敲入cnpm init，回車，會提示輸入name,version等信息，不填，直接回車，接著提示Is this OK? 輸入y，回車。

891434793-57dfbfccf1482_articlex.png

會看到根目錄下多了一個文件package.json，打開這個文件，會看到其中的內(nèi)容為：

{
  "name": "cloudbox.weixin",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

將其修改為：

    {
  "name": "cloudbox.weixin",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-cache": "^0.4.5",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^2.0.12",
    "gulp-concat": "^2.6.0",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-jshint": "^2.0.1",
    "gulp-load-plugins": "^1.3.0",
    "gulp-minify-html": "^1.0.6",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^2.0.0",
    "imagemin-pngquant": "^5.0.0",
    "jshint": "^2.9.3"
  }
}

在根目錄下新建一個空白文件，命名為gulpfile.js，用記事本或者其他文本編輯器將其打開。將以下代碼粘貼進去，并保存。

var gulp = require('gulp'),
    cache = require('gulp-cache'), // 圖片快取，只有更改過得圖片會進行壓縮
    clean = require('gulp-clean'), // 清理目錄或文件
    cleanCss = require('gulp-clean-css'), // 壓縮css
    concat = require('gulp-concat'), // 文件合并 合并css/js文件 減少頁面的Http請求
    htmlmin = require('gulp-htmlmin'), // 壓縮html
    imagemin = require('gulp-imagemin'), // 圖片壓縮
    imageminPngquant = require('imagemin-pngquant'),
    jshint = require('gulp-jshint'),
    minifyHtml = require('gulp-minify-html'), // 壓縮html
    rename = require('gulp-rename'), // 文件重命名
    rev = require('gulp-rev'), // 加MD5后綴
    revCollector = require('gulp-rev-collector'), // 根據(jù)manifests 替換html中引入的路徑
    sequence = require('gulp-sequence'), // 按順序執(zhí)行任務
    uglify = require('gulp-uglify'), // 混淆js
    del = require('del'); // 刪除當前文件所在的目錄下的文件夾

// 壓縮css 并加MD5后綴
gulp.task('cleanCss', function () {
    return  gulp.src('weixin/resources/css/**/*.css') // 需要壓縮的css文件
            //.pipe(concat('style.min.css')) // 合并后的文件名
            //.pipe(rename({suffix : '.min'})) // 重命名壓縮后的css文件
            .pipe(cleanCss()) //執(zhí)行壓縮
            //.pipe(gulp.dest('dist/resources/css')) // 壓縮后的輸出目錄
            .pipe(rev()) // 文件名加MD5后綴
            .pipe(gulp.dest('dist/resources/css')) // 輸出目錄
            .pipe(rev.manifest()) // 生成一個rev-manifest.json
            .pipe(gulp.dest('dist/resources/rev/css')) // 將 rev-manifest.json 保存到 rev/css 目錄內(nèi)
});

// 壓縮js 并加MD5后綴
gulp.task('minifyJs', function () {
    return  gulp.src('weixin/resources/js/**/*.js') // 需要壓縮的Js文件
            //.pipe(rename({suffix : '.min'})) // 重命名壓縮后的Js文件
            .pipe(uglify()) // 執(zhí)行壓縮
            .pipe(rev()) // 文件名加MD5后綴
            .pipe(gulp.dest('dist/resources/js')) // 壓縮后的輸出目錄
            .pipe(rev.manifest())
            .pipe(gulp.dest('dist/resources/rev/js'))
});

// 壓縮圖片
gulp.task('imageMin', function () {
    return  gulp.src('weixin/resources/images/**.*')
            //.pipe(imagemin())
            //.pipe(rev()) // 文件名加MD5后綴
            .pipe(gulp.dest('dist/resources/images'))
            //.pipe(rev.manifest())
            //.pipe(gulp.dest('dist/resources/rev/images'))
});

// 修改引入的文件名
gulp.task('rev', function () {
    return  gulp.src(['dist/resources/rev/**/*.json', 'weixin/*.html']) // 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
            .pipe(revCollector()) // css名替換
            .pipe(gulp.dest('dist/')); // 輸出目錄
});

gulp.task('build', function (done) {
  sequence(
     ['cleanCss', 'minifyJs', 'imageMin'],
     ['rev'],
  done);
});

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