gulp——用自动化构建工具增强你的工作流程
2017-12-14 14:51
721 查看
gulp概念
之前有写了webpack, 现在重新写gulp感觉二者最终结果虽说相差无几,但是侧重点还是有所不同 webpack更偏向于工程化,gulp侧重于项目的整个流程控制,你可以二者结合,也可以分开取舍 都有利于前端项目的工程化构建
- 安装
1、全局安装 $ npm install -g gulp 2、作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3、 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4、 运行 gulp: $ gulp
api
(1) gulp.src()
gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/` .pipe(minify()) .pipe(gulp.dest('build')); // 写入 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base: 'client' }) .pipe(minify()) .pipe(gulp.dest('build')); // 写入 'build/js/somedir/somefile.js'
(2) gulp.task()
其实gulp就是不断起一些任务函数,来运行你的项目 gulp.task('copyplugin',function(){ gulp.src('./src/plugin/**/*') .pipe(gulp.dest('./dev/plugin')) }) gulp.task('packscss',function(){ gulp.src('./src/styles/app.scss') .pipe(sass().on('error',sass.logError)) .pipe(gulp.dest('./dev/styles')) }) ....
(3) gulp.watch()
用来接听任务函数,把要接听的任务传入 启动的时候 会根据传入的任务进行执行,当然,不会按顺序 gulp.task('watch',function(){ gulp.watch('./src/*.html',['copyhtml']) gulp.watch('./src/images/**/*',['copyimg']) gulp.watch('./src/styles/**/*.scss',['packscss']) }
(4) 当你想直接gulp启动项目的话,会使用
gulp.task('default',['webserver','copyhtml','copyimg','copyplugin','packscss','packjs','watch'], function(){ console.log('DONE') })
其实gulp常用的就是插件,下面介绍一下项目中常用的插件,从而帮你更高效的构建项目
(1) 启动服务插件 npm i gulp-webserver -D
配置:
引入gulp var gulp = require('gulp') var webserver = require('gulp-webserver') gulp.task('webserver',function(){ gulp.src('./dev') //编译后的根目录 .pipe(webserver({ host : 'localhost', port : 4000, directoryListing : { //启动项目显示目录 enable : true, path : './dev' }, livereload : true })) })
(2) 编译sass npm i gulp-sass node-sass -D
var sass = require('gulp-sass') gulp.task('packscss',function(){ gulp.src('./src/styles/app.scss') .pipe(sass().on('error',sass.logError)) .pipe(gulp.dest('./dev/styles')) console.log('sass编译啦') })
(3) 编译commenjs实现模块化开发 npm i gulp-webpack -D
var webpack = require('gulp-webpack') gulp.task('packjs',function(){ gulp.src('./src/scripts/app.js') .pipe(webpack({ output : { filename : 'app.js' //输出文件为 name.js }, module : { loaders :[ //加载器 { test : /\.js$/, //指定加载文件的类型 loader : 'imports-loader', //用imports-loader解析 exclude : './node_modules' //排除不需要编译的js文件 } ] } })) .pipe(gulp.dest('./dev/scripts')) })
(4) 解析浏览器不识别的require npm i imports-loader -D
直接 $ gulp 即可 bogon:guang_m macbook$ npm i imports-loader -D guang_m@1.0.0 /Users/macbook/Desktop/learning/third/guang_m └─┬ imports-loader@0.7.1 ├── loader-utils@1.1.0 └── source-map@0.5.7 npm WARN guang_m@1.0.0 No description npm WARN guang_m@1.0.0 No repository field. bogon:guang_m macbook$ gulp [15:01:40] Using gulpfile ~/Desktop/learning/third/guang_m/gulpfile.js [15:01:40] Starting 'webserver'... [15:01:40] Webserver started at http://localhost:4000 [15:01:40] Finished 'webserver' after 21 ms [15:01:40] Starting 'packscss'...
(5) 解析多个js文件 npm i vinyl-named -D
gulp.src('./src/scripts/app.js') .pipe(name()) .pipe(webpack({ output: { filename: '[name].js' }, module: { loaders: [ { test: /\.js$/, loader: 'imports-loader', exclude: './node_modules' } ] }
(6) 下载yo3 框架,专注于移动端的scss npm i yo3 -D
在node_modules中找到yo3 复制style到项目src中
习惯性的在style中创建app.scss 用来import一些需要的文件
,再在usage中创建模块scss文件index.scss显示页面样式
.m-index{ height: 100%; @include flexbox(); @include flex-direction(column); header{ height: .44rem; background: #00b38a; } section{ background: #fff; @include flex(); } footer{ height:.44rem; background: #f6f6f6; } }
(7) 加载字符串模板 npm i string-loader -D
loaders : [ { test : /\.js$/, loader : 'imports-loader', exclude : './node_modules' }, { test : /\.string$/, loader : 'string-loader' } ]
好了 ,常用就这些了 如果有新的知识点后续还会补充…..
相关文章推荐
- # 理解Gulp:用自动化构建工具增强你的工作流程
- 应用WSH、JavaScript和 bat 实现自动化构建工具改善工作中的代码部署流程!
- 前段自动化构建工具gulp使用(一) 安装
- 前端自动化构建工具gulp的使用总结
- gulp前端自动化构建工具(二):gulp插件/gulp模块介绍
- 前端自动化构建工具gulp记录
- 前端工作流程自动化——Grunt/Gulp 自动化
- gulp自动化构建工具安装使用(1)
- 自动化构建工具gulp环境搭建整理
- js,css 自动化构建工具gulp初探
- gulp+nginx—前端自动化构建工具
- gulp--自动化构建工具学习笔记
- gulp.js--基于流的自动化构建工具
- gulp前端自动化构建工具(三):gulp工具配置文件
- 做一个合格的前端,gulp自动化构建工具入门教程
- 前端自动化构建工具gulp使用指南
- 自动化构建工具(gulp)
- 前端自动化构建工具----gulp安装教程
- 配置自动化构建工具Gulp