gulp tutorial

OverviewBefore I used gulp to build front-end projects, this node-based and advocating "programming rather than configuring" tools made me fall in love with him. Powerful gulp can do more than just compress and merge js, CSS, it can do more. Today I bring you to use the gulp foreground to create AJAX simulation data.The problem solvedDevelopment, the backend has

Gulp is a NODEJS-based automatic task runner that automates the testing, checking, merging, compressing, formatting, automatic browser refresh, and deployment file generation of JAVASCRIPT/COFFEE/SASS/LESS/HTML/IMAGE/CSS and other files. And listen for files that repeat the specified steps after the change. In the implementation, gulp borrowed from the UNIX operating system pipeline (pipe) thought, the prev

This error occurs when you use Gulpfile to configure the automatic compilation of a listening file update: "Error:file to import not found or unreadable:./m-body"And there will be a strange phenomenon, when the change of a file encountered this error and then restart the compilation of the normal monitoring of the file, but the other files are not, it is the file after the error and then restart the compilation is normal.Try a variety of solutions have no effect, once thought is Gulpfile file wr

A few months ago, San Mujun recommended to me gulp, to now because the work needs to touch it, really ashamed, in this record of the first impression of Gulp.Global Installation:$ NPM Install–global GulpA gulpfile.js file:This file needs to be created in the root directory of the project. Default task (Do Nothing): var gulp = require(' Gulp ');

Installation ToolsGlobal InstallationNPM Install--global GulpDependent installation of the project--save-dev Gulp--save-dev Gulp-rename--save-dev gulp-uglify--save-dev Gulp-concatCreate the gulpfile.js in the SRC directory you want to compressvarGulp = require (' Gulp '));va

ES6 introduced a lot of new syntax features, but want to do in the existing browser environment, need to ES6 code to ES5 code, there are many transcoding babel,traceur, etc., after reference, use Traceur and gulp to build ES6 environment, start my ES6 .Start installationFirst make sure the Nodejs is installed on your computer.1. Create a project directory2. Global installation traceur, in console inputNPM install-g traceur3. Open the project directory

To prevent the client from caching static resources, we need to rename the static resources by MD5 or timestamps every time we update the CSS or JS. Allows the client to re-request the resource instead of fetching it from the cache. The SRC in the HTML template is then modified accordingly. Of course, there is an additional requirement that static resources need to be optimized for themselves (compression merges).Here is the code for my gulpfile.js:varGulp = require ('

First of all, it is not very good to put webpack here, because Webpack is more accurate than the require,sea of such modular tools, and the former two more inclined to compression confusion and so on;After downloading the NPM package, each of the three will need their config file;Grunt Congfig File Writing format is a key value, similar to the writing of a configuration, gulp is a fallback function, like programming, Wepack configuration written simil

First, install the Gulp1. Before setting up the task in depth, you need to install Gulp:$ NPM Install Gulp-g2. This will install gulp into the global environment, allowing you to access the Gulp CLI. Next, you need to install the project on the local side. CD to your project root directory and execute the following ins

Webpack is a packaging toolWebpack is used to package your source files into a file, you have done a series of configurations, you can use a sentence Webpack to implement the functionality of packaging.The role of Webpack is to start with a number of files, find all relevant files based on the citation relationship between files, and pack them into several packaged files.Gulp is an automated tool .Gulp is used to automate, after you write a bunch of t

This is not about what typescript is, Typescript is a superset of JavaScript, but in the process of using or learning, We need to compile a well-written. ts file into a. js file before it can be used, so it adds a lot of trouble to the beginning of the learning process, so it's why I have to build an automated development environment that can save a lot of time on some mechanical work. Typescript official website gave a formal environment, but not enough to meet my needs, so I need to build on t

This is the first time to pause the next blog-you draw my guess the progress, because in this game, want to use the latest NG2 technology, but the pit is a piece after another, this way first introduced the environment deployment and pits historySince to use NG2, first to get resources, I use the AngularJs2 beta version of the online resources have two kinds, One is a fully compressed version of the file. Min.js version of the other is a lot of messy JS files, mainly ng2 has been fully adopted t

When we are completely separated from the front and back, there is a problem that has always been a headache, that is, the introduction of public headers and footer. In the case of traditional back-end rendering, we can write the header, footer as two separate templates, and then use the back-end language's include to be introduced in other pages. I previously in the "a simple rough front-end separation scheme," this article said one way, is to use handlebars the header, footer template precompi

Before the front-end code deployment is grunt, and then a gulp tool, recently tried a bit, very convenient, feel better than grunt easy to use, the following some common tasks listed, spare.varGulp = require (' Gulp '));varSdir = ' 0.0.1 ';varDdir = ' 0.0.1.release ';varGutil = require (' Gulp-util '));varClean = require (' G