gulp | 易学教程

chrome 插件开发工程

阅读更多关于 chrome 插件开发工程

从github找到Extension Boilerplate插件项目，示例丰富，插件支持Chrome, Opera & Firefox。我在此基础上更新依赖包到最新版本，根据gulp4语法更新gulpfile.babel.js。能够成功打包。写此记录学习历程。github地址 https://github.com/jahson88/chrome-ext-template 依赖包版本如下： "babel-core": "^6.26.0", "babel-preset-es2015": "^6.1.2", "babelify": "^7.3.0", "browserify": "^14.1.0", "cross-env": "^3.2.4", "event-stream": "^3.3.4", "gulp": "^4.0.2", "gulp-babel": "^8.0.0", "gulp-clean": "^0.4.0", "gulp-eslint": "^6.0.0", "gulp-if": "^3.0.0", "gulp-livereload": "^4.0.2", "gulp-load-plugins": "^2.0.1", "gulp-merge-json": "^1.3.1", "gulp-plumber": "^1.2.1", "gulp-rename": "^1.2

gulp使用心得

阅读更多关于 gulp使用心得

本文假设你之前没有用过任何任务脚本（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实时编译less，压缩合并requirejs模块文件

阅读更多关于 gulp实时编译less，压缩合并requirejs模块文件

gulp的使用命令简单，就几个，gulp的简单使用教材可以参考一点的gulp使用教材（http://www.ydcss.com/archives/18）。下面就简单的介绍这些命令如何互相配合的完成前端的构建工作。项目结构：首先全局安装gulp，使用命令：npm install -g gulp 一：gulp实时编译less var gulp = require('gulp'); var gulpLess = require('gulp-less'); var gulpMinifyCss = require('gulp-minify-css'); var gulpSourcemaps = require('gulp-sourcemaps'); 　　这4个插件就是目前用到的，需要其他功能可以自己添加。gulp-less是编译less用的插件，gulp-minify-css是压缩css的插件，gulp-sourcemaps是便于压缩后代码调试的。 gulp.task('allLess', function(){ gulp.src('src/less/**/*.less') .pipe(gulpSourcemaps.init())//sourcemaps .pipe(gulpLess())//编译less .pipe(gulpSourcemaps.write()) .pipe(gulp

前端自动化构建工具——gulp

阅读更多关于前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具。一、环境配置 gulp是基于nodejs的，所以没有 nodejs 环境的要先去安装好然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下跟grunt一般，也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了）然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样：(使用jshint插件校验js代码） var jshint = require('gulp-jshint'); gulp.task('myTask',function(){ return gulp.src('main.js') .pipe(jshint({undef: true})); }); 然后命令行使用：gulp myTask 即可运行此程序。二、基本用法--插件使用 gulp所支持的插件也是很多的，使用方式跟基本的nodejs差不多。下面统一介绍几个常见的插件，更详细用法可以到对应官方站点查看API sass的编译（ gulp-ruby-sass ）自动添加css前缀（ gulp-autoprefixer ）压缩css（ gulp-minify-css ） js代码校验（ gulp-jshint ）合并js文件（ gulp

In what order does gulp process tasks?

阅读更多关于 In what order does gulp process tasks?

问题 I'm a bit confused about the order in which tasks are completed using Gulp. Allow me to explain. In gulpfile.js, I have all my required dependencies followed by a set of tasks. The basic template of each sub task is gulp.task('compress:customName', function() { return gulp.src(['app/folder/file.js', 'app/folder/file.js']) .pipe(gp_concat('app.customName.min.js')) .pipe(gp_uglify()) .pipe(gulp.dest(distDir)); }); Then, I have a task that rules them all gulp.task('compress:all', [ 'compress

In what order does gulp process tasks?

阅读更多关于 In what order does gulp process tasks?

Uncaught ReferenceError: jQuery is not defined, even though jQuery is first imported script

阅读更多关于 Uncaught ReferenceError: jQuery is not defined, even though jQuery is first imported script

问题 This question has been asked before Uncaught ReferenceError: jQuery is not defined and Uncaught ReferenceError: $ is not defined? and Test if jquery is loaded not using the document ready event But, I find the error on browser as main.js:88 Uncaught ReferenceError: jQuery is not defined at main.js:88 My main.js looks like (function($) { 'use strict'; // all functions here })(jQuery); I make imports in my index.html as  <script src="https://ajax.googleapis

Browser sync reloading but CSS not changing with LESS and Gulp

阅读更多关于 Browser sync reloading but CSS not changing with LESS and Gulp

问题 I'm trying to figure out how to use browser sync in conjunction with gulp and less to get the browser to automatically update upon changes in less files after compilation. What I've got right now is causing what appears to be a reload in the system with a message "Connected to Browser Sync" but I'm not seeing changes occur in the browser. On a full manual reload with cache disabled I see the expected changes, so the css / less task seems to be working partially but I'm missing something on

Node starts my server, so does gulp, but gulp doesn't find any paths

阅读更多关于 Node starts my server, so does gulp, but gulp doesn't find any paths

问题 I am sure this is something small, but I am unable to figure it out. Node, nodemon and gulp use app.js to start my server so I am not sure why one way works while gulp does not. If I start my server using: nodemon app.js or node app.js it starts fine and when I use the path localhost:1337 in the browser it does what it is supposed to do. When I use the command: gulp it says that it started the server but when I navigate to localhost:1337 it does not display anything other than "Cannot GET /"

Handle multiple files in a Gulp plugin

阅读更多关于 Handle multiple files in a Gulp plugin

问题 I am trying to write a gulp plugin. You use it like this: var gulp = require('gulp'), codo = require('gulp-codo'); gulp.task('doc', function () { return gulp.src('*.coffee') .pipe(codo()) // codo(name, title, readme, dir) }); I want *.coffee to provide all the coffeescript files in the current directory to codo(). In the plugin the input is handled like so: return through.obj(function(file, enc, cb) { invokeCodo(file.path, name, title, readme, dir, function(err, data) { if(err) { cb(new gutil

订阅 gulp