Angular.js project uses GULP to implement automation construction and compression packaging detailed explanation

GULP introduction

Based on the front end automation construction tool, GULP can improve the front-end development efficiency, especially in the project separated by the front and rear ends. Use GULP to complete the following tasks:

Compressed HTML, CSS, and JS

    Compile LESS or SASS
  • Compressed picture
  • Local static server
  • Other
  • Target

One-button installation project all dependencies One-click installation project All dependencies

    Code Check ensure that strict grammar is correct
  • can be replaced into a JS module in JS module and compressed into JS file
  • will all CSS file merger
  • Combine all JS files
  • Dynamic introduction resource file
  • Two packages in the development environment and production environment
  • NPM based on Node-based package manager

GULP based on the Node file stream boer is the web development A front-end file package manager

  • Realization process
  • 1, one-click installation project all dependencies

Create a project use command (item directory)

npm init // Generate package.json {“name”: “Leason”, “Version”: “1.0.0”, “DescripTION: “Test for angular and gulp and unit testing”, “main”: “gulpfile.js”, “dependencies”: {}, “devdependencies”: {}, “scripts”: {“test”: “echo \ “Error: No test specified \” && exit 1 “},” repository “: {},” keywords “: [” leason “],” author “:” leason “,” license “:” ISC “,” BUGS ” : {},}

NPM installation dependencies module adopted

npm install xxx –save // ​​save To dependencies (Production) NPM INSTALL XXX –SAVE-DEV / / Save to DEVDependencies
Save the corresponding module in Package.json, project redeployment only needs command

NPM INSTALL / / All Modules in Package
   All dependencies all dependent modules use Bower Management Machine, usage and npm - similar 


// code syntax checkOrder – Gulp jshintvar jshint = require (‘gulp-jshint’); // code check gulp.task (‘jshint’, function () {return gulp.src (paths.js) .pipe (jshint ()) .pipe (JSHINT.Reporter (‘Default’));});

Convert HTML as JS module

[ NPM Install Gulp-Angular-TemplateCache – Save-DEV
/ / Merged HTML Template Command – Gulp TemplateVar TemplateCache = Require (‘gulp-angular-templatecache’); gulp.task (‘template’, function () {return gulp.src ([‘./ Templates / ** / *. html’, ‘. / templates / *. HTML ‘]) .pipe ({Module:’ Templates’) .pipe (Gulp.dest (‘./ js’))});
  3, consolidation of all CSS files  

// Merged Compressed CSS Command – Gulp DeploycsSvar cssmin = require (‘gulp-cssmin’); gulp.task (‘deploycss “, function () {return gulp.src (paths.css) .pipe (cssmin ()) .pipe (Concat (‘ all.css’ ))));});});
   4, combined with all JS files 
NPM Install Gulp-Uglify – Save-dev // Compressed NPM Install Gulp-Concat –Save-dev // Merged NPM Install Gulp-SourceMapsy – Save-dev // Generate SourceMapnPM Install Gulp-Strip-Debug –Save-Dev // Remove Print
/ / Test production of two JS compression commands – Production Gulp JS –Prod Test Gulp JS – Devgulp.Task (‘JS’, Function (Type) {Console.log (Type); if (Type == ‘DEV’) {// dev return gulp.src (path.js) .pipe (‘all.js’)) .pipe (gulp.dest (‘/ build’));} else {// prod return Gulp.src (paths.js) .pipe (Sourcemaps.init ()) .piPE (StripDebug ()) .pipe (uglify ()) .pipe (‘all.min.js’)) .pipe (SourceMaps.write ()) .pipe (gulp.dest (‘./ build’))

5, in accordance with the existing file wants in Index

 NPM Install Gulp-INJECT --SAVE-DEV   Index.html Location Location Location Such as: 

Development environment
  // DEV Resource Reference Command --Gulp Devindexgulp.task ('Devindex', ['Clean', 'JSHINT'], Function () {// it's not necessary to read the files Will Speed ​​Up Things), We're ONLY AFTER THEIR PATHS: RETURN GULP.SRC ('./ Index.html') .pipe (incject (gulp.src (paths.js, {read: faLSE}), {relative: true})) .pipe (gulp.src (paths.css, {read: false}), {relative: true}) // .pipe (incject (gulp.src (bowerfiles (), {read: false}, {name: 'bower', relative: true})) .pipe (gulp.dest ('./'));});  

// Production Environment Resource Reference Command – Gulp DeployIndexgulp.task (‘DeployIndex’, [‘Clean’, ‘JSHINT’, ” Template ‘,’ JS ‘,’ Deploycss ‘], Function () {// it’s not necessary to read the file (will speed up things), We’re Only After their paths: return gulp.src (‘ ./ index. HTML ‘) .pipe (inject (gulp.src (paths.buildjs), {relative: true})) .pipe (incject (gulp.src (paths.buildcss, {read: false}), {Relative: True}) // .pipe (incject (gulp.src (bowerfiles (), {read: false}, {name: ‘bower’, relative: true}) .pipe (gulp.dest ” ./’) ?;}; “

The code is confused to cause the dependency injection of Angular to not be identified, so the strictly dependent write method is used during code. The

angularApp.config ([ ‘$ routeProvider’, ‘$ stateProvider’, ‘$ urlRouterProvider’, function ($ routeProvider, $ stateProvider, $ urlRouterProvider) {$ stateProvider .state ( ‘sidebar’, {url: ‘/ sidebar’, // abstract: true, templateUrl: ‘templates / sidebar.html’, controller: ‘sidebarCtrl’}) $ urlRouterProvider.otherwise ( ‘/ sidebar / tab1’)
   Summary    The above is the full content of this article, I hope this paper is learning to everyone. Or work can bring a certain help, if you have any questions, you can leave a message, thank you for your support of Tumi Cloud.                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment