gulp打包
npm install gulp-cli -g //全局安装gulp,作为命令行工具是不能require到的
npm install gulp -D //在当前项目的目录下安装gulp，才能require到，等于 npm install --save-dev gulp
touch gulpfile.js //新建gulpfile.js文件
gulp --help
gulp有五个方法：src、dest、task、run、watch
src和dest：指定源文件和处理后文件的路径
watch：用来监听文件的变化
task：指定任务
run：执行任务
#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定义一个任务，执行：gulp css
gulp.src('./src/css/*.css') //获取该路径下的所有css文件
.pipe(concat('index-merge.css')) //3个文件合并成一份
.pipe(cssnano()) //压缩数据流
.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
1.配置
npm install webpack -g 全局安装webpack命令对应的项目目录下
npm init //创建package.json文件npm install --save-dev webpack2.对js、css之类的整理下，以 commonJS 的形式来书写脚本。
项目文件夹
其中的一个脚本文件示例
var $ = require('./jquery.min.js') //require到对应的jQuery文件
module.exports = function(){ //module.exports导出文件
function Button1($ct){
this.$ct = $ct
this.bind()
}
Button1.prototype = {
bind: function(){
this.$ct.click(function(){
$('.box').css({'background': 'red'})
})
}
}
new Button1($('.button1'))
}
再看看相应的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 进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。
npm install --save-dev css-loader style-loader 即可解决该问题
3.创建webpack.config.js
const path = require('path');
let base = {
index:'./src/js/entry.js' //入口问价
};
module.exports = {
entry: base,
output:{
path: path.resolve(__dirname, './public'), //绝对路径的形式
filename:"bundle.js" //输出的文件名称
},
module:{ //加载器配置
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'}, //.css 文件使用 style-loader 和 css-loader 来处理
]
}
};
4.项目上线后，创建.gitignore，如果和node_modules同级目录则输入：node_modules。即可隐藏。
