gulp打包

npm install gulp-cli -g //全局安裝gulp,作為命令行工具是不能require到的
npm install gulp -D //在當(dāng)前項(xiàng)目的目錄下安裝gulp琉用，才能require到堕绩，等于 npm install --save-dev gulp
touch gulpfile.js  //新建gulpfile.js文件
gulp --help

gulp有五個(gè)方法：src、dest邑时、task奴紧、run、watch
src和dest：指定源文件和處理后文件的路徑
watch：用來監(jiān)聽文件的變化
task：指定任務(wù)
run：執(zhí)行任務(wù)

#gulpfile.js文件中
var gulp = require('gulp')
//以下組件均需要npm --save-dev xxx
var cssnano = require('gulp-cssnano') //壓縮css
var uglify = require('gulp-uglify') //壓縮js
var concat = require('gulp-concat') //文件合并
var imagemin = require('gulp-imagemin') //圖片壓縮
gulp.task('css', function(){   //task定義一個(gè)任務(wù)晶丘，執(zhí)行：gulp css
    gulp.src('./src/css/*.css') //獲取該路徑下的所有css文件
            .pipe(concat('index-merge.css')) //3個(gè)文件合并成一份
            .pipe(cssnano())  //壓縮數(shù)據(jù)流
            .pipe(gulp.dest('./dist/css/'))  //放置文件
})
gulp.task('js', function(){
    gulp.src('./src/js/*.js')
            .pipe(concat('index-merge.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js/'))
})
gulp.task('imgs', function(){
    gulp.src('./src/imgs/*.jpg')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/imgs/'))
})
gulp.task('default', ['css','js','imgs'])

webpack打包示例

webpack是近期最火的一款模塊加載器兼打包工具绰寞，它能把各種資源，例如JS（含JSX）、coffee滤钱、樣式（含less/sass）觉壶、圖片等都作為模塊來使用和處理。

image.png

項(xiàng)目文件夾

其中的一個(gè)腳本文件示例

    var $ = require('./jquery.min.js')    //require到對(duì)應(yīng)的jQuery文件
    module.exports = function(){   //module.exports導(dǎo)出文件
        function Button1($ct){
            this.$ct = $ct
            this.bind()
        }
        Button1.prototype = {
            bind: function(){
                this.$ct.click(function(){
                    $('.box').css({'background': 'red'})
                })
            }
        }
        new Button1($('.button1'))
    }

再看看相應(yīng)的entry.js(入口文件)

require('../css/test.css')
var $ = require('./jquery.min.js')
var button1 = require('./button1.js')
var button2 = require('./button2.js')
var button3 = require('./button3.js')
button1()
button2()
button3()

入口文件可以require到css文件嗎他炊？可以的争剿，需要借助loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件痊末，就需要使用 loader 進(jìn)行轉(zhuǎn)換蚕苇。Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)凿叠，接受源文件作為參數(shù)涩笤，返回轉(zhuǎn)換的結(jié)果。這樣盒件，我們就可以通過 require 來加載任何類型的模塊或文件蹬碧，比如 CoffeeScript、 JSX炒刁、 LESS 或圖片恩沽。

npm install --save-dev css-loader style-loader 即可解決該問題
3.創(chuàng)建webpack.config.js

const path = require('path');
let base = {
  index:'./src/js/entry.js'   //入口問價(jià)
};
module.exports = {
    entry: base,
    output:{
        path: path.resolve(__dirname, './public'),  //絕對(duì)路徑的形式
        filename:"bundle.js"  //輸出的文件名稱
    },
    module:{   //加載器配置
        loaders:[
        {test:/\.css$/,loader:'style-loader!css-loader'},  //.css 文件使用 style-loader 和 css-loader 來處理
        ]
    }
};

4.項(xiàng)目上線后，創(chuàng)建.gitignore翔始，如果和node_modules同級(jí)目錄則輸入：node_modules罗心。即可隱藏。