gulp

Gulp前端构建前端开发环境

。_饼干妹妹 提交于 2020-02-02 05:53:21
一、下载并安装Node.js C:\Users\Administrator>node -v v11.0.0 二、安装npm,安装淘宝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org C:\Users\Administrator>cnpm -v cnpm@6.0.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.5.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@11.0.0 (C:\Program Files\nodejs\node.exe) npminstall@3.17.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\Administrator\AppData\Roaming\npm win32 x64 10.0.17763

gulp教程之gulp-uglify

馋奶兔 提交于 2020-02-02 05:46:32
简介: 使用gulp-uglify压缩javascript文件,减小文件大小。 1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2、本示例目录结构如下: 2、本地安装gulp-uglify 2.1、github: https://github.com/terinjokes/gulp-uglify 2.2、安装:命令提示符执行 cnpm install gulp-uglify --save-dev 2.3、注意:没有安装 cnpm 请使用 npm install gulp-uglify --save-dev 。 什么是cnpm,如何安装? 2.4、说明: --save-dev 保存配置信息至 package.json 的 devDependencies 节点。 为什么要保存至package.json? 3、配置gulpfile.js 3.1、基本使用 JavaScript 1 2 3 4 5 6 7 8 var gulp = require ( 'gulp' ) , uglify = require ( 'gulp-uglify' ) ; gulp . task ( 'jsmin' , function ( ) { gulp . src (

Gulp入门教程

大城市里の小女人 提交于 2020-02-02 05:44:53
Gulp 是Web开发中帮你自动完成任务的工具。它可以完成的前端任务包括: 启动Web Server 当文件修改保存后,自动刷新浏览器 批量处理Sass或者Less文件 优化资源CSS, JavaScript, 和 images 安装Gulp -g 参数表示全局安装 $ npm install gulp -g 创建Gulp项目 创建一个名为 demo 的目录( 目录名不能用gulp ),在目录下运行 npm init npm init 会在项目下创建一个 package.json 文件,以保存项目相关信息,如项目名,项目依赖包等。 安装gulp依赖包到项目中 $ npm install gulp --save-dev 这次我们只是把gulp安装到项目目录,而不是全局。 --save-dev 会增加开发依赖(dev dependency)配置到 package.json 项目文件结构 Gulp允许你用任务文件结构来构建项目,但是在使用前你最好理解Gulp的内部原理。 本教程使用通用的webapp文件结构 app是开发目录 ,我们的代码就放在这个目录下。 dist (distribution的缩写)是存放发行目录,存放优化后的文件 gulpfile.js 是gulp的配置文件 创建gulp任务 使用gulp的第一步是在 gulpfile.js 中 require gulp. var

前端构建工具gulp入门教程

孤街浪徒 提交于 2020-02-02 05:44:20
新建Gulpfile文件,运行gulp 安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务。 检查Javascript 编译Sass(或Less之类的)文件 合并Javascript 压缩并重命名合并后的Javascript 安装依赖 npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 新建gulpfile文件 现在,组件都安装完毕,我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。 gulp只有五个方法: task , run , watch , src ,和 dest ,在项目根目录新建一个js文件并命名为 gulpfile.js ,把下面的代码粘贴进去: // 引入 gulp var gulp = require('gulp'); // 引入组件 var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');

前端构建工具gulp入门教程

杀马特。学长 韩版系。学妹 提交于 2020-02-02 05:43:54
本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境。访问 http://nodejs.org ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装,稍后会用到它。 第二步:使用命令行 也许现在你还不是很了解什么是命令行——OSX中的终端(Terminal),windows中的命令提示符(Command Prompt),但很快你就会知道。它看起来没那么简单,但一旦掌握了它的窍门,就可以很方便的执行很多命令行程序,比如Sass,Yeoman和Git等,这些都是非常有用的工具。 如果你很熟悉命令行,直接跳到步骤四。 为了确保Node已经正确安装,我们执行几个简单的命令。 node -v 回车(Enter),如果正确安装的话,你会看到所安装的Node的版本号,接下来看看npm。 npm -v 这同样能得到npm的版本号。 如果这两行命令没有得到返回,可能node就没有安装正确,尝试重启下命令行工具,如果还不行的话,只能回到第一步进行重装。 第三步:定位到项目 现在,我们已经大致了解了命令行并且知道如何简单使用它

gulp教程之gulp-concat

依然范特西╮ 提交于 2020-02-02 05:40:31
简介: 使用gulp-concat合并javascript文件,减少网络请求。 1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2、本示例目录结构如下: 2、本地安装gulp-concat 2.1、github: https://github.com/wearefractal/gulp-concat 2.2、安装:命令提示符执行 cnpm install gulp-concat --save-dev 2.3、注意:没有安装 cnpm 请使用 npm install gulp-concat --save-dev 。 什么是cnpm,如何安装? 2.4、说明: --save-dev 保存配置信息至 package.json 的 devDependencies 节点。 为什么要保存至package.json? 3、配置gulpfile.js 3.1、基本使用 JavaScript 1 2 3 4 5 6 7 8 var gulp = require ( 'gulp' ) , concat = require ( 'gulp-concat' ) ; gulp . task ( 'testConcat' , function ( ) { gulp .

gulp教程之gulp-less

ぃ、小莉子 提交于 2020-02-02 05:35:31
1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2、本示例目录结构如下: 2、本地安装gulp-less 2.1、github: https://github.com/plus3network/gulp-less 2.3、安装:命令提示符执行 cnpm install gulp-less --save-dev 2.4、注意:没有安装cnpm请使用 npm install gulp-less --save-dev 什么是cnpm,如何安装? 2.5、说明: --save-dev 保存配置信息至 package.json 的 devDependencies 节点。 为什么要保存至package.json? 3、配置gulpfile.js 3.1、基本使用 JavaScript 1 2 3 4 5 6 7 8 var gulp = require ( 'gulp' ) , less = require ( 'gulp-less' ) ; gulp . task ( 'testLess' , function ( ) { gulp . src ( 'src/less/index.less' ) . pipe ( less ( ) ) . pipe (

Getting “module not defined” error when using Gulp to run karma tests

纵然是瞬间 提交于 2020-02-02 04:37:11
问题 My team is working on moving from Grunt to Gulp. I have a Grunt test task that works fine, but when I try to run the tests (using gulp-karma) I get an error that says "ReferenceError: Can't find variable: module" I Googled and found a lot of posts saying to check the location of my angular-mocks.js file, and it's in the correct space (my Grunt task for the same code does work). To verify that it wasn't something weird in my code a spun up a new yo angular app and was able to replicate the

how to output multiple bundles with browserify and gulp

孤街浪徒 提交于 2020-01-30 14:16:26
问题 I have browserify bundling up files and it's working great. But what if I need to generate multiple bundles? I would like to end up with dist/appBundle.js and dist/publicBundle.js gulp.task("js", function(){ return browserify([ "./js/app.js", "./js/public.js" ]) .bundle() .pipe(source("bundle.js")) .pipe(gulp.dest("./dist")); }); Obviously this isn't going to work since I am only specifying one output (bundle.js). I can accomplish this by repeating the above statement like so (but it doesn't

小程序 - 使用Sass预处理器

偶尔善良 提交于 2020-01-30 09:44:00
小程序使用CSS预处理器 微信小程序原生不支持CSS预处理器的语法,但仅仅支持@import引入其他.wxss模块 解决方法:在每个页面下新建.scss文件,使用 Gulp 构建工具将.scss文件转化成.wxss 1.在小程序项目根目录执行 npm init 2.然后安装 gulp、gulp-sass、gulp-rename(使用Less则安装gulp-less) npm i gulp gulp-sass gulp-rename -D 3.新建 gulpfile.js 文件 const gulp = require('gulp'); const rename = require('gulp-rename'); // 重命名插件 const sass = require('gulp-sass'); function handleSass() { return gulp.src('mp/**/*.scss') // 读取mp目录下的所有 .scss 文件 .pipe(sass().on('error', sass.logError)) // 使用 gulp-sass 插件转化 .pipe(rename({ extname: '.wxss' })) // 将拓展名修改为 .wxss .pipe(gulp.dest('mp')) // 导出到 mp 文件夹下 } // watch