前端自动化之项目搭建

1.先安装全局的gulp

$ npm install --global gulp

2.npm初始化,在项目内创建package.json文件

npm init

3.项目文件路径下,将gulp安装到项目内。

$ npm install --save-dev gulp

4.创建gulp主文件==》gulpfile.js

5.编写gulpfile.js

测试代码:

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
    // 将你的默认的任务代码放在这
    console.log(111111111111111111)
});

6.gulp任务编写

时间: 2024-11-05 16:34:40

前端自动化之项目搭建的相关文章

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

基于gulp搭建的前端自动化构建框架

Gulp-cli 基于gulp搭建的前端自动化构建.适用于中小型项目,快速构建前端项目框架. 项目启动 // 常用命令 项目编译: npm run build 项目编译并启动: npm run start 项目地址 如对你有帮助,希望给个Star !哈哈哈!! git clone [email protected].com:perfectSymphony/Gulp-cli.git 项目目录 ├── README.md # 项目说明 |-- bin # (在gulpfile文件中使用到)解析lay

jenkins+git+maven搭建自动化部署项目环境

简介    折腾了两个晚上,趁着今晚比较有空,把jenkins+git+maven搭建自动化部署项目环境搭建的过程记录一下,这里我把github作为git的远程仓库(https://github.com/jacky-        lulu/cxf_demo-Maven-Webapp)     系统:centos6.5 maven: Apache Maven 3.3.9 git:git version 2.0.0 1.首先安装git,看以前另外一篇博客 http://www.cnblogs.co

近期总结:generator-web,前端自动化构建的解决方案

本文结合最近的工作经验,总结出一个较简洁的前端自动化构建方案,主张css和js的模块化,并通过grunt的自动化构建,有效地解决css合并,js合并和图片优化等问题,对于提高前端性能和项目代码质量有一定参考价值,欢迎阅读和点评:) github地址:https://github.com/liuyunzhuge/generator-web demo地址:https://liuyunzhuge.github.io/generator-web/ 有兴趣的同学,在阅读文章,学习或使用demo的过程中,有

前端自动化构建工具-yoman浅谈

如今随着前端技术的飞速发展,前端项目也变得越来越复杂.快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求.当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的时间.既然如此要是有自动化的项目构建工具,帮你生成各种必须的配置项,你只需愉快的写代码该多方便呀.嗯,是的这样的工具或者说脚手架确实是有的,就是下面要提到的eoman.来吧,一起看一下如何使用这个工具让你的项目秒建吧. 初识yeoman yeoman是什么 yeoman是Google领头开发的一个前端构

Grunt-beginner前端自动化工具-高清视频

[课程介绍]: 作为一名开发人员,在WEB前端项目开发中,重复而枯燥的工作太多,Grunt自动化的项目构建工具,帮你解决这些问题,对重复执行的任务像压缩,合并,编译,单元测试及代码检查等, 通过配置Grunt自动化工具,可以减轻您的劳动,简化您的工作. [课程须知]: 1.想提高运行前端开发工作流程 : 2.有一些项目开发经验,效果会更好. [你能学到什么?] 1. Grunt工具和插件的安装 2. 如何进行项目配置 3. 如何配置任务 4. 如何执行任务 5. Grunt的使用 [课程提纲]:

「移动开发」iuap mobile玩转前端自动化构建

提起iuapmobile studio,相信大家已经不再陌生了,是进行移动应用开发的强大集成工具与必备神器.借助强大的iuap mobile studio,可以实现对开发.测试.调试.打包.发布全程管理.同时iuap mobile studio又是一个极具开放性的平台工具,可以与绝大多数优秀的前端框架.技术很好地集成.今天我们就来看看在iuap mobile上如何玩转这些如火如荼的前端自动化构建技术.说起目前主流前端自动化构建技术,少不了npm.grunt.gulp.browserify.web

浅谈前端自动化构建

前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪.前端自动化构建在整个项目开发中越来越重要. 我们首先来回想一下之前我们是如何来开始做一个项目的. ① 首先要确定这个项目要使用什么样的技术来实现,然后开始规划我们的项目目录,接着就要往项目增加第三方库依赖,比如: 拷贝 CSS库(Yui Reset |

前端开发神器WebStorm--Grunt 搭建环境(03)

通过上一篇前端开发神器WebStorm--自动化工作流(前言),相信大家都Grunt自动化工具有了初步了解. 接下来我就以WROC3000 web为原型,演示一下如何使用Grunt工具提高工作效率,最大程度压缩代码. 1.首先安装node环境 进入官网 下载安装.(记住安装目录) 检测安装成功方法:打开CMD窗口,输入 node --version 会打印出安装的版本号,说明已经安装成功. 2.安装 Grunt 客户端 在CMD 窗口中,切换到node安装盘符,会自动切换到nodejs安装目录.