文章标题
来源:互联网 发布:ireport和java 编辑:程序博客网 时间:2024/06/09 02:42
前端的发展真的是快,前几年还是刀耕火种的开个编辑器,几行html和js代码就能上浏览器跑了。现在呢?各种包,各种库,各种框架,各种编程范式。究其原因,就是我们高中社会课本中那句话
人民日益增长的文质文化需求,同落后的社会生产之间的矛盾
想想也是,以前刀耕火种的编写页面效率非常低,而我国到目前为止网民的数量已经超过7亿了,可想而知对网页数量和多样化的需求巨大,那有什么方法来提高页面的生产效率呢?这就是我今天要讲的基于gulp平台的自动化生产平台。
gulp是啥?官方的解释是基于流的自动化构建工具
。好,那什么是流呢?这个流是从英语单词stream
翻译过来的,不过还是不好理解。其实可以这么理解,流就是工厂的一个生产车间生产出来的半成品,一个个半成品在输送带上送往下一个加工车间的过程。把运动的半成品看成是数据,那么流动的数据就是流。唉!好难解释啊!还是看代码吧。我已经把代码上传到github了,需要的同学自取,麻烦点个小星星 https://github.com/NicknameID/gulp-flow
1.依赖npm
由于npm在国内比较慢,所以推荐大家使用淘宝的cnpm,在国内访问比较快(搞不懂国家为什么立堵墙,难受)。
2.cnpm init 初始化package.json文件
-y
的作用可以跳过询问步骤直接生成默认的package.json文件
3.安装依赖包
由于依赖包太多了,就不一个一个写了 主要通过 cnpm install --save-dev 包的名字
的方式来安装的,
下图所列的就是自动化工具要用的包,我已经上传到github上了点击这里获取,
下载后只要 cnpm install
就可以了,就会根据package.json里的依赖去下载安装
在package.json中添加gulp字段方便调用本地安装的gulp命令,到这里package.json配置好了
4.gulpfile.js文件的内容(重点)
- 功能1—自动化生成项目目录
//gulpfile.js/*首先在全局上加载gulp,这个很重要*/const gulp = require('gulp');/*在全局上定义项目的目录结构,供应后面使用*/const dirs = { dist:'./dist', src: './src', css: './src/css', less: './src/less', js: './src/js', img: './src/img',};gulp.task('create-directory', () => { const mkdirp = require('mkdirp'); //这里要依赖mkdirp这个包,通过cnpm 安装 for (let i in dirs) { mkdirp(dirs[i], err => { err ? console.log(err) : console.log('mkdir-->' + dirs[i]);; }); }});//在终端运行cnpm run gulp create-directory
生成需要生成的项目目录,再也不用每次都去手工创建了,幸福感爆棚有木有!!!
- 功能2—编译less,并且实现less注入功能,热更新页面,方便开发时调试
这个功能要依赖的插件有
1.gulp-less
2.browser-sync
3.gulp-notify
4.gulp-plumber
/*全局定义要处理的文件*/const files = { lessFiles: './src/less/go.less', cssFiles: './src/css/*.css', jsFiles: './src/js/*.js', imgFiles:'./src/img/*.*'}//编译lessgulp.task('compile-less', () => {const less = require('gulp-less'); //依赖gulp-less的插件const notify = require('gulp-notify'); const plumber = require('gulp-plumber');const browserSync = require('browser-sync').create(); //browser-sync同步服务器const reload = browserSync.reload; //将browser-sync的reload方法存起来,方便调用 return gulp.src(files.lessFiles) .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) //使用gulp-notify和gulp-plumber用来阻止因为less语法写错跳出监视程序发生 .pipe(less()) .pipe(gulp.dest(dirs.css + '/')) .pipe(reload({stream: true}));});// 本地服务器功能,自动刷新(开发环境)gulp.task('server', ['compile-less'],()=>{const browserSync = require('browser-sync').create();const reload = browserSync.reload; browserSync.init({ server: './' }); gulp.watch(dirs.less+'/**/*.less', ['compile-less']); //监视less文件夹中的所有less文件,有改动就调用compile-less任务编译less gulp.watch('./*.html').on('change', reload); //监视html文件,有改动就刷新浏览器 gulp.watch(dirs.js+'/**/*.js').on('change', reload); //监视所有js文件有改动就刷新浏览器});//在cmd运行cnpm run gulp server
可以看到程序正在后台运行,正在监听文件改动
这样就可以左边开着编辑器写代码,右边开着浏览器看效果了,有木有很爽,人生别无他求了(感动中!!!)
- 功能3—添加浏览器私有前缀
要用到的插件包
1.gulp-postcss
2.gulp-sourcemaps
3.autoprefixer
//添加浏览器私有前缀(生产环境)gulp.task('autoprefixer', () => { const postcss = require('gulp-postcss'); const sourcemaps = require('gulp-sourcemaps'); const autoprefixer = require('autoprefixer'); return gulp.src(files.cssFiles) .pipe(sourcemaps.init()) //添加sourcemap,方便调试 .pipe(postcss([ autoprefixer() ])) //添加浏览器私有前缀,解决浏览器的兼容问题 .pipe(sourcemaps.write('.')) .pipe(gulp.dest(dirs.css+'/'))});
- 功能4—压缩css
要用到的插件包
1.gulp-minify-css
2.gulp-rename
// 压缩css(生产环境)gulp.task('minify-css', function () { const minifyCSS = require('gulp-minify-css'); const rename = require("gulp-rename"); return gulp.src(dirs.css+'/**/*.css') .pipe(minifyCSS({/*keepBreaks: true*/})) .pipe(rename(path=>path.basename += '.min')) //重命名文件输出后的样式为 原文件名.min.css .pipe(gulp.dest('./dist/css/'))});
- 功能5—合并压缩JavaScript文件
要用到的插件包
1.gulp-concat
2.gulp-uglify
3.gulp-rename
// js文件--合并--压缩(生产环境)gulp.task('js-concat-compress', (cb)=>{ let name = ''; //先定义一个变量将用于后面存文件名 const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const rename = require("gulp-rename"); return gulp.src(dirs.js+'/**/*.js') .pipe(rename(path=>{path.basename += '';name=path.basename;})) .pipe(concat('bundle.js')) //合并js文件 .pipe(uglify()) //压缩js文件 .pipe(rename(path=>{ path.basename = name+'.'+path.basename+'.min'; //改文件名加上 .min })) .pipe(gulp.dest('dist/js/')); });
- 功能6—图片无损压缩
要用到的插件包
1.gulp-imagemin
// 图片无损压缩gulp.task('img-handl',()=>{ const imagemin = require('gulp-imagemin'); return gulp.src(files.imgFiles) .pipe(imagemin()) //imagemin()里是可以写参数的,有需要的可以去github的页面看看 .pipe(gulp.dest('./dist/img/'))});
- 功能7—项目的打包
有时候我们做完东西需要打包,方便传输,而有些文件又是不需要打包进去的,比如说node_modules
文件夹,一键打包的快感体验过绝对会爱上的
依赖的插件包
1.gulp-zip
// 项目打包(生产环境)gulp.task('zip',()=>{ const zip = require('gulp-zip'); return gulp.src(['./*.html','**/dist/**/*.*','!**/node_modules/**/*.*']) //这里需要注意的是,在写要打包的文件时,避免打包的文件不能写在开头,这里'!**/node_modules/**/*.*'放在了最后 .pipe(zip('project.zip')) //打包后的文件名,自己随意取 .pipe(gulp.dest('./'))});
5.整理任务执行,方便调用任务
因为gulp执行任务时是以最大的任务并发数同时进行的,所以有时候我们需要按步骤进行,就需要插件gulp-sequence
,将任务按顺序写入,就会按顺序执行
写了这么多功能模块,需要好好的整理一下,方便调用。我已经把完整的代码上传到github了,需要的同学自取,麻烦点个小星星 https://github.com/NicknameID/gulp-flow
// ------------------开发阶段命令----------------------------------------------------gulp.task('start', ['create-directory']); //项目初始化的第一个命令gulp.task('dev-watch', ['server']); //开始编写项目后开启服务器实时更新// ------------------生产阶段命令------------------------------------------------------gulp.task('prefixer', ['autoprefixer']); //给css文件添加浏览器私有前缀 files.cssFiles ==>> .src/css/gulp.task('min-css', ['minify-css']); //压缩css文件 files.cssFiles ==>> dist/css/gulp.task('js-handl', ['js-concat-compress']); //合并计算文件 dirs.js/**/*.js ==>> ./dist/js/concated.jsgulp.task('img-handl', ['img-handl']) //处理图片,对图片进行无损的压缩//----------------一键生成项目文件命令----------------------------------------------- //因为gulp执行任务时是以最大的任务并发数同时进行的,所以有时候我们需要按步骤进行,就需要插件`gulp-sequence`,将任务按顺序写入,就会按顺序执行const runSequence = require('gulp-sequence').use(gulp);gulp.task('bunld-project',runSequence('clean-dist','compile-less','autoprefixer','minify-css','js-concat-compress','img-handl','zip'))
6.小结
看到没有,使用gulp其实并没有用到很多本身的API,都是通过不同的插件来实现的处理过程,所以gulp更加像一个处理平台,而非大包大揽的处理程序,他只负责数据的流向,从pipe(管道)的这头流向另外一头,剩下的事情就交给各个插件了,像不像现代社会的细化分工。分工明确才能提高效率,这是社会发展的经验总结。文章有点长,感谢看完的小伙伴!!!
- 文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题 文章标题 文章标题 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- Verilog中如何对数组赋值(存储器memory详解)
- 2017 07 23 小结
- 使用TabLayout
- 排序
- 2017 07 24 小结
- 文章标题
- 关于matlab中矩阵的运算
- hdu2089 不要62(C语言)
- leetcode 105 & 106
- Android输入系统之如何进行Dispatche分发
- struts2标签下的用户注册
- java自学-流程控制案例
- web窗体中如何添加table
- HTML5本地数据库写留言版功能