刚刚学习了Gulp,使用它搭建了一个开发环境,目前项目中使用的是
less 作为css开发工具
这样我们就需要如下插件
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifyHTML = require("gulp-minify-html");
var htmlreplace = require('gulp-html-replace');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var connect = require('gulp-connect');
第一步: 安装nodejs
这里不复述了,百度一下一坨一坨的
第二布, 安装gulp
npm install gulp --dev-save;
第三步: 安装各类插件
npm install gulp-minify-css --dev-save;
npm install gulp-autoprefixer --dev-save;
npm install gulp-notify --dev-save;
npm install gulp-uglify --dev-save;
npm install gulp-concat --dev-save;
npm install gulp-rename --dev-save;
npm install gulp-minify-html --dev-save;
npm install gulp-html-replace --dev-save;
npm install gulp-less --dev-save;
npm install gulp-connect --dev-save;
第四步: 创建gulpfile.js
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifyHTML = require("gulp-minify-html");
var htmlreplace = require('gulp-html-replace');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var connect = require('gulp-connect');
//使用connect启动一个Web服务器
gulp.task('connect', function () {
connect.server({
root: 'app',
livereload: true
});
});
gulp.task('html', function () {
gulp.src('app/*.*')
.pipe(connect.reload())
.pipe(notify({message:'reload master'})); // 输出到目录;
});
gulp.task('build-less', function () {
gulp.src(['./app/assert/less/**/*.less'])
.pipe(concat('less.css')) // 将所有less文件合并到less.css
.pipe(less())
.pipe(autoprefixer('last 15 version','ie 8')) // autoprefixer配置
.pipe(gulp.dest('./app/assert/css'))
.pipe(notify({message:'less is done,master'}));; // 输出到目录
});
gulp.task('html-replace',function() {
var opts = {comments:false,spare:false,quotes:true};
return gulp.src('app/html/**/*.html')
.pipe(htmlreplace({
'css': 'css/all.min.css',
'js': 'js/all.min.js'
}))
.pipe(minifyHTML(opts))
.pipe(gulp.dest('app/dest/html'));
});
gulp.task('css',function(){
return gulp.src('app/assert/css/less.css')
.pipe(autoprefixer('last 15 version','ie 8'))
.pipe(minifycss())
.pipe(gulp.dest('app/dest/css/min'))
.pipe(notify({message:'all css done,master'}));
});
gulp.task('minifyjs',function(){
return gulp.src('app/assert/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('app/dest/js/min'))
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/dest/js/min'))
.pipe(notify({message:'js is done,master'}));
});
//创建watch任务去检测html文件,其定义了当html改动之后,去调用一个Gulp的Task
gulp.task('watch', function () {
gulp.watch(['./app/**/*.*'], ['allFiles']);
gulp.watch([
'app/assert/less/**/*.less',
'app/assert/css/**/*.css',
'app/assert/js/**/*.js',
'app/html/**/*.html',
], ['build-less','css','minifyjs','html-replace']);
});
//使用connect启动一个Web服务器
gulp.task('connect', function () {
connect.server({
root: 'app',
livereload: true
});
});
gulp.task('allFiles', function () {
gulp.src('./app/**/*.*')
.pipe(connect.reload());
});
//运行Gulp时,默认的Task
gulp.task('default', ['connect', 'watch']);
分享到:
相关推荐
使用gulp搭建一个传统的多页面前端项目的开发环境
前端开发:根据设计稿进行页面切图,将页面的设计转化为代码,然后使用HTML、CSS和JavaScript等技术语言进行页面的搭建和开发,同时关注页面的交互效果、动画效果等。 前端测试:测试页面的兼容性、响应式布局、用户...
gulp的基本搭建流程。主要是搭建一个可用的gulp环境。在开发的时候遇到问题可以作为笔记翻阅。
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,下面这篇文章主要给大家介绍了关于前端构建工具之gulp的配置与搭建的相关资料,需要的朋友可以参考下...
#用gulp搭建一个自动化的(gulp+browserify+react+less+es6)前端开发环境Usage> git clone https://github.com/liuyan5258/react-example.git> 如果你还没有安装 gulp ,先用npm安装> npm install -g gulp> npm ...
3、本地开发环境搭建: 使用gulp集成jshint对JS语法检查,加入browser-sync与nodemon,实现实时刷新及服务器的自动重启等功能。 4、网站整体功能: 网站正常访问无需管理员权限,对电影的评论及个人中心资料的修改,...
本篇为开篇,主要讲述如何使用webpack搭建开发环境。 项目初始化 以你喜欢的任意方式,创建项目根目录,如: mkdir vue-hello 初始化包模块管理文件 进入项目根目录,初始化项目包模块管理文件package.json: npm ...
上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法。 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . ...
为了UED前端团队更好的协作开发同时提高项目编码质量,我们需要将Web前端使用工程化方式构建; 目前需要一些简单的功能: 1. 版本控制 2. 检查JS 3. 图片合并 4. 压缩CSS 5. 压缩JS 6. 编译SASS 这些...
本项目使用koa构建服务,前端React,React路由器,redux,react-redux,postcss,es6,babel等,webpack和gulp整合打包合并,打包后的项目资源代码自动上传到七牛云 提供快速建造项目结构,自动化建设开发流程,自动...
我们使用了(简称gulp)作为前端自动化工具,gulp是构建在平台上的一整套前端自动化工具平台,有大量的插件可供我们使用。因此,第一次启动此项目前我们需要搭建好自动化环境。 2. gulp环境搭建 gulp是node.js平台上的...
2、运用了gulp构建工具,并使用其相关插件实现合并SVG及在开发环境中实现前后端改动后实时刷新;3、采用了百度地图API来创建李氏家居及庐山市违章高发地的位置标注;4、使用了懒加载技术提升网站访问速度及节约用户...
前端代码学习库学习尖端技术的代码...目录说明00_笔记目录 - 记录着学习所有技术的笔记01_08代码目录 - 每个技术的练习与实战100_开发工具库 - 快速搭建环境与快速开发的工具目录101_功能测试 - 用于测试指定功能的目录
前言 React 是一个用于构建用户界面的 JavaScript 库。...入门教程及环境搭建 在官方文档中,有一种方式是基于npm的,我比较喜欢这种方式,这也是官方比较推荐的,下面我们就一步一步创建一个React的简单应用。