项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了不少,如:grunt,gulp,webpack,百度团队的fis3等,在前端的领域都占有自己的一席之地,webpack可以说是后起之秀,加之vuejs,reactjs,angularjs等MVVM框架的出现,配合webpack开发,成为业内常见的一种开发模式 在公司项目开发的时候,选用了gulp+w…

gulp+ThinkPHP配置 gulp+ThinkPHP配置 目录结构: html |-src 开发目录 |-Home 静态页面 |-Public 静态资源目录 |-dist 生产目录 |-Home 静态页面 |-Public 静态资源目录 注:gulp-cssnano 弃用 命令行运行指令 cnpm install --save-dev gulp watch //热刷新 gulp build //压缩输出内容 gulp clean //清空目录下的dist文件 更新 2/10/2018 4:…

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.安装gulp npm install -g gulp 2.切换到项目文件夹后创建gulpfile.js  如下: var gulp = require('gulp'); var uglify =…

安装gulp 因为gulp是基于node的管理工具,所以要先安装nodejs安装nodejsnodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.org/en/下载后直接运行.msi文件安装完成后,打开命令行(win+R)键入node -查看node版本 全局安装gulp npm install -g gulp 在项目目录下安装gulp,若要在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:(项目目…

使用gulp拷贝文件,可以完成开发api环境变量的配置,例如公司的线上环境有三个: 1.alpha线上测试环境 2.dev线上测试环境 3.test 本地测试环境 (4.production 正式系统环境) 各个环境的apIhost不一样,在开发中每次更改url会很不方便,所以用到gulp可以完成环境变量的配置. 在git ignore文件中忽略gulp生成的文件夹 /.test/(我的文件夹名为test即本地测试系统) 使用gulp拷贝文件夹不改变文件目录和路径有两个方法: 1.给gulp.s…

上一篇的gulp配置很简单,主要就是为了demo的查看和调试,这一篇则会相对详细一些,包括压缩合并打时间戳等. 在互联网环境比较好的城市,需要多人协作的,大一点的项目应该都用上了模块化(这里主要指commonjs和ES6模块系统,不是再早的require.js和sea.js).代码也会更注重如何分离和注入,而不再是单纯的合并. 但是在很多小公司,开发模式或技术都还是比较传统的,或者一些小项目也完全不需要用上那些比较前沿的技术. 所以这篇配置就主要为了这样的中小项目. 1.所需工具和版本 包管理工…

优化了文件过滤,更改文件只会重新生成修改的文件 项目目录构建: 在入口文件public下,创建html目录,作为前台静态资源目录 gulp.js文件 /*! * gulp * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin b…

在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了. 最近一段时间不是太忙,所以就写了三份配置,用在不同的情况下. 这篇文章介绍第一份配置,也是最简单的一份. 这份配置我把它称作demo测试配置,因为在我工作的时候,经常需要快速出效果或者实现某些功能,你没有时间去自己实现,那么就需要找一些现有的例子或者插件. 不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器,所以这份配置…

转自:https://www.jianshu.com/p/2549c793bb27 gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩…

Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版本 npx --version 通过命令配置 npm 淘宝镜像 npm config set registry https://registry.npm.taobao.org npm config get registry #验证命令 npm config list #列出当前npm的配置列表 定位…