Front-end Tool Gulp Learning

I've heard it a long time ago that if you want to be a real web front-end engineer, you have to automate your build tools. Like Grunt,gulp,webpack. Always listen to the great God with these tools to build an automated front-end environment, what file compression, file merge, JS grammar check, CSS automatically add prefixes, compile Less/sass, automatically refresh the page, file renaming and so on. Once the file is configured, a command will allow the entire process to run. Think is also how cool, so, with a variety of doubts, from last week began to gulp study, a week time is to gulp have an understanding of the introduction, also stepped on a lot of pits.

Let's build an environment first. Preparation steps. (Direct dictation, no map.) ）

1, to Nodejs official website to download a Nodejs installer, and then install Nodejs, click on the default installation on the line. At this point, the system will automatically add an environment variable, so in the system's PATH environment variable will have NODEJS installation path, if not, you can manually add.

2, since Nodejs is now integrated with NPM, so after opening the command line tool, enter Node-v, npm-v see if you can print out the version number successfully, if you feel that NPM version is too low, you can use NPM i npm-g update. I is the abbreviation for install. You can also use NPM config get prefix to find the installation path for NPM.

3, the global installation Gulp, NPM install GULP-G, after the installation is complete, gulp is installed under NPM under the Node_modules folder.

4, increase the system node_path environment variables, is generally in the C:\Users\Administrator (this according to your own set) \appdata\roaming\npm\node_modules.

5, after the setup is completed, the cmd input gulp-v, if the correct output version number, indicating that the download gulp successful, the environment configuration is also successful.

6, the actual combat demo. At this point, we find a location, such as the desktop, create a new folder, build the directory structure. For example named Gulp-demo, after we CD Desktop/gulp-demo, entered the Gulp-demo project. First, we enter the command NPM init, all the way to enter, the command will save our used and configured information. It is convenient for us to install the package according to the above information in another environment.       Then we need to install Gulp and various modules locally, that is, within the project. NPM I gulp--save-dev (--save will save the module information to Package.json).

Then create a new Gulpfile.js file in the root directory to configure our task.

7, file merge, file compression, grammar check, monitor file changes. Let's get these four first.

varGulp = require (' Gulp '));varJshint = require (' Gulp-jshint ');//Grammar CheckvarConcat = require (' Gulp-concat ');//Merging FilesvarUglify = require (' gulp-uglify ');//Compress CodevarRename = require (' Gulp-rename ');// Renaming//Grammar CheckGulp.task (' Jshint ',function () {returnGULP.SRC (' Public/javascripts/*.js '). Pipe (Jshint ()). Pipe (Jshint.reporter (' Default '));});//compressing code after merging filesGulp.task (' Minify ',function (){returnGULP.SRC (' Public/javascripts/*.js '). Pipe (Concat (' All.js '). Pipe (Gulp.dest (' Public/javascripts/dist ') . Pipe (Uglify ()). Pipe (Rename (' All.min.js '). Pipe (Gulp.dest (' Public/javascripts/dist '));});//monitor changes to filesGulp.task (' Watch ',function() {Gulp.watch (' Public/javascripts/*.js ', [' jshint ', ' minify ']);});//Registering default TasksGulp.task (' Default ', [' jshint ', ' minify ', ' Watch ']);

Because I am also just in the entry stage, if there is wrong place, hope to criticize and advice. 3q.

Front-end Tool Gulp Learning