前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 现有目录结构如下： └── js/ └── a.js 规律 1. 找到 js/目录下的所有 .js 文件 2. 压缩这些 js 文件 3. 将压缩后的代码另存在 dist/js/ 目录下 编写 gulp gulp.src('js/*.js') // 2. 压缩 .pipe(uglify()) // 3. 另存 .pipe(gulp.dest('dist/js')); }); 代码执行结果 代码执行后文件结构 └── js/ │ └── a.js └── dist/ └── js/ └── a.js gulp 入门指南 a.js 压缩前 function demo (msg) { alert('--------\r\n' + msg + '\r\n--------') } demo('Hi') a.js 压缩后 function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi"); 此时 dist/js 目录下的 .js 文件都是压缩后的版本。

Setup 2 1. Install Node.js and NPM: 2 2. Install gulp globally: 2 3. Initialize your project directory: 3 4. Install gulp in your project devDependencies: 3 5. Create a gulpfile.js at the root of your your project: 3 6. Run gulp: 3 Task dependency 3 Concat js file in sub folder using gulp 4 gulp CLI docs 4 Flags 4 Task specific flags 5 Tasks 5 Compilers 5 Chapter 2: Comprehensive Guide to a Front Plugins from Package.JSON 11 Note 11 NOTE 12 Installing Plugins for Responsive images|Css Minification|Js minification 12 Image processing plugins 12 Asset optimizer plugins 13 Anatomy of a gulp function

exports = { entry: './path/to/my/entry/file.js' }; 单⼊入⼝口：entry 是⼀一个字符串串 多⼊入⼝口：entry 是⼀一个对象 module.exports = { entry: { app: './src/app.js', adminApp: './src/adminApp.js' } }; 核⼼心概念之 Output Output ⽤用来告诉 webpack /path/to/my/entry/file.js' output: { filename: 'bundle.js’, path: __dirname + '/dist' } }; Output 的⽤用法：多⼊入⼝口配置 module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: filename: '[name].js', path: __dirname + '/dist' } }; 通过占位符确保⽂文件名称的唯⼀一 核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的

webpack ⾃自动清理理构建⽬目录 module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name][chunkhash:8].js', path: __dirname + '/dist' }, plugins: [ + new CleanWebpackPlugin() 内联避免⻚页⾯面闪动 · ⼩小图⽚片或者字体内联 (url-loader) HTML 和 JS 内联 raw-loader 内联 html raw-loader 内联 JS