Gulp JS简单操作-待续

一、安装gulp

1、深入设置任务之前,需先安装gulp:

$ npm install gulp -g

2、这会将gulp安装到全域环境下,让你可以存取gulp的CLI。接著,需要在本地端的专案进行安装。cd到你的专案根目录,执行下列指令(请先确定你有package.json档案):

$ npm install gulp --save-dev

二、生成文件结构

 (生成node_modules文件)

三、创建gulpfile.js文件

var gulp = require(‘gulp‘),
uglify = require("gulp-uglify");   //uglify为JS压缩

gulp.task(‘default‘,[‘js‘], function(){
console.log(‘js file is beginning...‘);
});

gulp.task(‘js‘, function(){
console.log(‘>>>start task:js‘);

gulp.src(‘scripts/app/reactTest/reactTest.js‘)   //需要打包的目录文件
.pipe(uglify())    //uglify为JS压缩
.pipe(gulp.dest(‘compressfile/js‘));   //打包到目标位置
});

四、然后执行

在cmd 执行gulp default 或者 cd到项目目录执行命令 gulp --gulpfile gulpfile.js

下载文件代码 在GIT上

时间: 2024-08-07 04:14:05

Gulp JS简单操作-待续的相关文章

Gulp.js - 简单、直观的自动化项目构建工具

代码示例: var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var imagemin = require('gulp-imagemin'); var paths = { scripts: ['client/js/**/*.coffee', '!client/extern

JS的简单操作和表单以及事件

HTML:主要用于往页面上放置所需要的控件. CSS:主要用来控制页面以及上面控件的样式. JS:主要用来控制页面上的特效以及数据交互. JS也分为顺序,条件(IF()... ELSE()),循环(FOR())三种语句,与C#基本一致. JS定义变量统一用var,定义数组不固定长度和类型,类似C#中的集合. JS的简单操作: DOM操作: 一.window: 1.window.onload 页面打开完再执行后面的操作 2.window.open(1,2,3,4) - 打开新页面, 1 - 打开页

关于select中操作,以及js前台计算,span简单操作

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset =utf-8"> <title>js获取数据</title> </head> <body> <span id="s1">111</span><br

又一个选择 - Gulp.js

前言 还记得过年前的那篇介绍grunt.js的文章,grunt.js的强大,相信大家都见识了.年后打了两天的酱油,看了不少grunt.js的插件和教程.发现了一个号称比grunt.js要好的构建工具 - gulp.js,详细简介gulp.js.网上有很多比较grunt.js和gulp.js的文章.谈论到的不外乎以下几点: gulp.js比grunt.js要简单.设置gulpfile.js就和编写代码一样,而不像Gruntfile.js的配置文件.(这个我十分认同,gulp.js确实比grunt.

Gulp.js简介

Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新图片或修改后图片的压缩 去除调试语句如console,debugger 合并和压缩css和js 把更新的文件部署到服务器 你可能设想大家都会记住所有的这些操作,但总会有人忘记一两条.随着项目越来越大,上面的工作越来越浪费时间.只好设专人来完成这些枯燥的工作. 能不能让这些工作不用

gulp的简单使用(MAC OX 系统)

1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: sudo npm install -global gulp-cli 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--save-dev:(可以不执行) npm install --save-dev gulp 这样就

[翻译]Gulp.js简介

我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新图片或修改后图片的压缩 去除调试语句如console,debugger 合并和压缩css和js 把更新的文件部署到服务器 你可能设想大家都会记住所有的这些操作,但总会有人忘记一两条.随着项目越来越大,上面的工作越来越浪费时间.只好设专人来完成这些枯燥的工作. 能不能让这些工作不用占用人手呢? 你需要

“流式”前端构建工具——gulp.js 简介

Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什么使得 gulp.js 备受关注呢? Grunt 之殇 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一

关于gulp的简单用法

1.1. npm -Node的包管理工具 node package manager npm官网 淘宝镜像 cnpm 1.2. 安装 node 下载node的安装包,直接安装 1.2.1. 验证是否安装成功 1 使用win + r键,打开运行窗口 2 输入cmd,敲回车,进入到命令行工具 3 输入node -v,检测node是否安装成功 4 输入npm -v,检测 npm 1.2.2. 使用淘宝镜像 npm config set registry https://registry.npm.taob