gulp+webpack+react前端自動化

時間  2019-11-11
標籤 gulp+webpack+react gulp webpack react 前端 自動化 欄目 JavaScript 简体版
原文   原文鏈接

環境要求：javascript

1.安裝nodejs，gulp和webpack都須要使用nodejs來運行。nodejs安裝很簡單這裏無需贅述css

2.安裝gulp的安裝請參考http://my.oschina.net/u/1760791/blog/668431，gulp的使用demo請下載gulpTesthtml

3.安裝webpack,其實基於gulp有一個組件叫gulp-webpack,因爲最終將使用gulp-webpack，所以能夠不用安裝webpackjava

先安裝nodejs就能夠，其餘兩個根據下面實例一步一步的進行就能夠node

一.關於gulp+webpack+react+es6整合實例react

開始本實例以前，最後建一個workspace專門用於作react的相關demowebpack

1.進入本身的workspacees6

$ cd [your workspace]web

$ mkdir gulp-webpack      //新建一個gulp-webpack的項目npm

$ cd gulp-webpack     //進入項目根目錄

$ npm init  //經過npm初始化項目，自動生成package.json

$ vim package.json

在package.json中輸入如下內容並保存退出

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "a webpack test",
  "main": "main.js",
  "scripts": {
    "test": "a test command"
  },
  "keywords": [
    "test",
    "webpack"
  ],
  "author": "sunyu",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.17.0",
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-less": "^3.0.5",
    "gulp-md5-plus": "^0.2.5",
    "gulp-webpack": "^1.5.0",
    "jsx-loader": "^0.13.2",
    "path": "^0.11.14",
    "style-loader": "^0.12.3"
  }
}

$ vim Gulpfile.js   //在項目根目錄新建gulp入口文件

而後在Gulpfile.js中輸入如下內容

var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
var clean = require('gulp-clean');
var md5 = require('gulp-md5-plus');
var less = require('gulp-less');
var concat = require('gulp-concat');
//拷貝html文件到目標頁面
gulp.task('copy:html', function (done) {
    gulp.src(['src/app/*.html'])
        .pipe(gulp.dest('dist/app'))
        .on('end', done);
        // .pipe(connect.reload())
});
//將圖片拷貝到目標目錄
gulp.task('copy:images', function (done) {
    gulp.src(['src/images/**/*']).pipe(gulp.dest('dist/images')).on('end', done);
});
//壓縮合並css, css中既有本身寫的.less, 也有引入第三方庫的.css
gulp.task('lessmin', function (done) {
    gulp.src(['src/css/main.less', 'src/css/*.css'])
        .pipe(less())
        //這裏能夠加css sprite 讓每個css合併爲一個雪碧圖
        //.pipe(spriter({}))
        .pipe(concat('style.min.css'))
        .pipe(gulp.dest('dist/css/'))
        .on('end', done);
});
//將js加上10位md5,並修改html中的引用路徑，該動做依賴webpack
gulp.task('md5:js', ['webpack'], function (done) {
    gulp.src('dist/js/*.js')
        .pipe(md5(10, 'dist/app/*.html'))
        .pipe(gulp.dest('dist/js'))
        .on('end', done);
});
//清空輸出目錄
gulp.task('clean', function (done) {
    gulp.src(['dist'])
        .pipe(clean())
        .on('end', done);
});
//使用webpack打包js
gulp.task('webpack', function () {
	var myConfig = Object.create(webpackConfig);
	return gulp
        .src('')
        .pipe(webpack(myConfig))
        .pipe(gulp.dest('./dist/js'));
});

// 註冊缺省任務
gulp.task('default', ['copy:html','copy:images','lessmin','webpack']);
//部署任務
gulp.task('deploy', ['copy:html','copy:images','md5:js']);

$ vim webpack.config.js //在項目根目錄新建webpack的配置文件

var webpack = require('webpack');
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var path = require('path');
var fs = require('fs');
var srcDir = path.resolve(process.cwd(), 'src');

function getEntry() {
    var jsPath = path.resolve(srcDir, 'js');
    var dirs = fs.readdirSync(jsPath);
    var matchs = [], files = {};
    dirs.forEach(function (item) {
        matchs = item.match(/(.+)\.js$/);
		console.log("item:"+item);
        console.log(matchs);
        if (matchs&&item != 'App.js') {
            files[matchs[1]] = path.resolve(srcDir, 'js', item);
        }
    });
    console.log(JSON.stringify(files));
    return files;
}
// 配合使用gulp打包
module.exports = {
  devtool: false,
  entry:{
    index:'./src/js/index.js',
    main:'./src/js/main.js'
  },
  output: {
    filename: "[name].js"
  },
  module: {
    loaders: [
	   //.css 文件使用 style-loader 和 css-loader 來處理
      { test: /\.css$/, loader: "style!css" },
      //.js 文件使用 jsx-loader 來編譯處理
      { test: /\.js$/,	loader: "babel",query:{presets:['es2015','react']} }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins:[
		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
		new webpack.NoErrorsPlugin(),
		new CommonsChunkPlugin("common.js"),
		new webpack.DefinePlugin({
            'process.env': {
                //產品模式會減小js的體積
                'NODE_ENV': JSON.stringify('production'),
            }
        }),
		new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
  ]
};
關與webpack.config.js配置文件的說明：
devtool//指定是否開啓開發模式
entry//指定入口文件，對於單頁面app的entry指定一個就能夠，例如

entry:'./entry.js'//app應用的入口文件

output是指定構建打包輸出文件配置,若是將output中的filename指定爲具體的名字，則webpack會將js文件全體打包到指定的js文件中，例如將上面的webpack配置文件output爲以下，則main.js和index.js將被打包合併到bundle.js中

output: {
    filename: "bundle.js"
  },

module屬性中的配置尤其重要，尤爲是module中loader的配置直接決定着項目可否成功編譯react代碼和使用es6編寫的代碼

resolve配置webpack解析處理，resolve中extensions用於指明webpack自動補全識別哪些後綴,

注意一下, extensions 第一個是 空字符串 ! 對應不須要後綴的狀況

plugins配置項是用於添加一些額外的插件來編譯打包優化代碼等，若是不指定webpack編譯的代碼體積將很大。

例如：使用CommonsChunkPlugin插件來提取公共代碼，使用uglifyJsPlugin插件對代碼進行壓縮，DefinePlugin插件能夠用於定義任意類型的變量，demo中使用definePlugin定義爲production頗有意義，這會減小打包代碼的體積，固然在開發階段無需指定產品模式

 

$ mkdir src  //在項目根目錄下建立一個src的文件夾用於存放項目源代碼

$ cd src     //轉到src目錄

$ mkdir js  //js目錄專門用戶存放js源代碼

$ cd js    //轉到js目錄

$ vim App.js  //開始編寫react組件

//使用了es6的語法進行導入
import React from 'react';

class App extends React.Component{
	render(){
		return(<div> Hello World</div>);
	}
}
export default App;

$ vim main.js //

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.js';//依賴於上面的App.js

ReactDOM.render(<App/>,document.getElementById('content'));//將App組件的Hello world輸出到一個id爲content元素

$ vim index.js 

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.js';

ReactDOM.render(<App/>,document.getElementById('app'));

返回到src目錄，繼續往下面

$ mkdir app   //新建一個app的文件專門用戶存放html文件

$ cd app        //轉到app目錄建立html頁面

$ vim index.html 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Index</title>
 </head>
 <body>
	<div id="app"></div>
	<script src="../js/index.js"></script>
 </body>
</html>

$ vim main.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>main</title>
 </head>
 <body>
	<div id="content"></div>
	<script src="../js/main.js"></script>
 </body>
</html>

繼續退回到src目錄,新建兩個文件目錄css和images ,因爲本例未涉及css和圖片，能夠隨便放的css文件或者image到相應目錄。

返回根目錄運行以下命令安裝相關依賴

npm install --save-dev gulp
npm install gulp-webpack --save-dev
npm install gulp-clean --save-dev
npm install gulp-concat --save-dev
npm install gulp-md5-plus --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install gulp-less --save-dev
npm install react --save-dev
npm install react-dom --save-dev

下載的例子也要運行以上命令

$ gulp //經過gulp執行默認的任務將src下的資源處理後拷貝到生dist目錄並將內容放置到dist下

經過瀏覽器打開dist下app中的html即可看到效果

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程