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

/* gulp配置 */ /* gulp配置 */ var gulp = require('gulp'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), rev = require('gulp-rev-append'), //自动添加版本号 browserSync = require('browser-sync').create(); //热更新

SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow($shadow...){ -webkit-box-shadow:$shadow; -moz-box-shadow:$shadow; box-shadow:$shadow; } 用在属性或者选择器上,就得以#{}包裹 多个变量值一起申明: $linkColor: red blue !default;

/** * Created by leyi on 2016/8/25 0025. */ /*********************package.json依赖模块************************/ /* dependencies": { "gulp": "*", "gulp-autoprefixer": "*", "postcss-value-parser": "*&q

项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问. gulpjs.com中有很多插件可以用来配置打包部署. 需要用的常用插件有: gulp-jsmin  压缩js gulp-minify-css  压缩css gulp-imagemin  压缩图片 gulp-rename  重命名 gulp-clean  清空文件夹 gulp-copy  拷贝引用库,字体等文件 gulp-replace  替换html内容(将原来.js引用改为.min.js引用) 前置过

有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣...”. gulp是基于流的自动化构建工具,有以下几项优点: 易于使用: 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 构建快速: 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 插件高质: Gulp 严格的插件指南确保插件如你期望的那样简洁

简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1.gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2.本示例目录结构如下: 2.本地安装gulp-rev-append 2.1.github:https://github.com/bustardcelly/gulp-rev-append 2.2.安装:命令提示符执行 cnpm

版权声明:本文由金朝麟原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/627049001486519548 来源:腾云阁 https://www.qcloud.com/community 原来用的React+Webpack时,那种同步压缩修改.实时动态刷新页面的感觉真的太棒了.但如果使用Express+ejs+less的话,配置webpack非常繁琐,所以,一番折腾后,于是有了Express+Less+Gulp的配置方案

前端现在三足鼎立的构建工具(不算比较老的ant,yeoman),非fis,grunt,gulp莫属了. fis用起来最简单,我打算自己得项目中使用一下fis. 先说一下gulp安装吧. 第一步:安装node和npm,搭建node环境. 访问 http://nodejs.org.npm会随着安装包一起安装. 确保node 和npm安装,如果如下两个命令行没有正确安装得话,说明node没有安装正确. $ node -v v0.12.6 $ npm -v 2.11.2 第二步:安装gulp 认识npm

主线: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1,安装node.js 1.1.说明:gulp是基于nodejs,理所当然需要安装nodejs: 1.2.安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件).然后像安装QQ一样安装它就可以了(安装路径随意) 2,gulp 2.1 node -v 查看安装的nodejs版本,出现版本号,说

项目完成后的目录 我们所需要的插件为:gulp-minify-css gulp-concat gulp-uglify gulp-rename del 如下图所示,完成后的项目目录结构: 附加,获取package.json  (package.json 位于模块的目录下,用于定义包的属性.) 方法一.可以直接拷贝放进项目文件夹 方法二.npm init (自动初始化创建) 自动生成包含 { "name": "nodejs", "version":

初始化目录结构如下(图片看不清可以拖到桌面或者直接CTRL+鼠标滚轮进行观看) 开发环境示例: 上线环境示例: gulpfile.js(详解版) (2018-3-28)添加了scss处理(去除了less处理) (2018-3-29)添加了实时性处理(在src目录,sass目录下*.css和*.scss放在一起,防止跨域无法请求到) (2018-3-29)已知错误:生成文件夹dist后index.html无法重命名css和js (2018-4-12) 修复完毕(最简版)- 点击Github拉取 -

2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); // 引入组件 // 保证在当前项目目录下曾经运行过: // npm install gulp-uglify gulp-rename gulp-babel babel-preset-es2015 ...... --save-dev // var jshint = require('gulp-jshint'); va

需要 var es = require('event-stream'); gulp.task('browserify', function(){ var files = [ { fpath: './js/main.js', fname: 'main.js' }, { fpath: './js/main2.js', fname: 'main2.js' } ]; var tasks = files.map(function(entry){ return browserify({ entries: [

参考文献:http://blog.csdn.net/yuanyuan214365/article/details/53749583 1.安装nodejs:nodejs nodejs安装路径随意 node-v 2.全局安装淘宝cnpm:npm install cnpm -g --registry=https://registry.npm.taobao.org 3.全局安装gulp: cnpm install gulp -g 4.项目文件根目录新建package.json:新建package.jso

参考自:http://www.sheyilin.com/2016/02/gulp_introduce/ 在原先基础上增加了less编译 es6转码资源地图等,修改了一部分的热刷新. gulpfile.js文件 /*! * gulp * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-appen

gulp.task('tojs', () => { return gulp.src('./es/**/*.js') .pipe(babel({ babelrc: false, plugins: ['transform-es2015-modules-commonjs'] })) .pipe(gulp.dest('.rjs')) .on('end',()=>{ gulp.run('toes6') }); }); 思路是先实现所有有写import export语法的js文件都编译成require语法

安装 $ npm install gulp -g //全局安装gulp,让你可存取gulp的CLI //接着需要在本地端的专案进行安装,cd到专案根目录,执行 $ npm install gulp --save-dev //本地专案安装完毕,并记录与package.json内的devDependencies物件 //如果项目工程中没有package.json文件,请运行npm init,并填写信息 安装gulp外挂 $ npm install gulp-ruby-sass gulp-minify

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

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的配置列表 定位